HTMLのdetailsタグ内の子要素の高さをSafariだけ取得できない

実現したいこと

HTMLのdetailsとsummaryを使ったアコーディオンを、素のJavaScriptでアニメーションさせたいです。

前提

・コードはこちらのページを参考に作成しました。
・アクセシビリティを考慮し、detailsとsummaryを使用したいです。
・jQueryなどを使用せず、素のJavaScriptを使用したいです。
・Edgeなどその他ブラウザでの確認は未実施です。
・細かい調整は未実施の状態です。また、初心者なのでコードにおかしな部分があるかもしれません。

発生している問題

Chromeでは期待通りに動作していますが、Safariでは<div class="content">の高さを取得できず、アコーディオンが開きません。

試したこと

をに変更すると、Safariでも期待通りに動作しました。

該当のソースコード

HTML

1<details> 2 <summary class="summary">タップして開く</summary> 3 <div class="content"> 4 <div>アコーディオンの中身</div> 5 </div> 6</details>

CSS

1.summary {2 display: block;3 cursor: pointer;4}5 6.summary::-webkit-details-marker {7 display: none;8}9 10.content {11 overflow: hidden;12 transition: 0.3s ease-out;13}

JavaScript

1const summary = document.querySelectorAll('.summary');2 3for (let i = 0; i < summary.length; i++) {4 const details = summary[i].parentElement;5 const content = summary[i].nextElementSibling;6 content.style.height = 'auto';7 const contentHeight = content.clientHeight;8 9 content.style.height = '0px';10 summary[i].addEventListener('click', function (event) {11 event.preventDefault();12 13 const lastHeight = content.style.height;14 content.style.height = (lastHeight == '' || lastHeight == '0px') ? contentHeight + 'px' : '0px';15 16 if (details.hasAttribute('open') == false) {17 details.setAttribute('open', 'true');18 } else {19 const transitionDuration = Number(getComputedStyle(content).getPropertyValue('transition-duration').replace('s', '')) * 1000;20 window.setTimeout(function () {21 details.removeAttribute('open');22 }, transitionDuration);23 }24 25 }, false);26}