safariにおいてアコーディオンの要素クリック時にCSSのバグ解決のアドバイスが欲しいです
解決したいこと
Macのsafariで今回作成したアコーディオン上で表示されているプラスアイコンをクリック時に滑らかに動くようにしたい。
発生している問題・エラー
Macのsafariで操作を確認するとかくついて動きが発生する。(ChromeとFireFoxでは滑らかに動くことが確認された)
該当するソースコード
index.html
<details class="Accordion">
<summary class="Accordion__Summary">
<span>アコーディオンのタイトル</span>
</summary>
<div class="Accordion__Content">
<p>コンテンツがここに入ります</p>
</div>
</details>
style.scss
* {
box-sizing: border-box;
}
summary {
cursor: pointer;
}
// summaryの「▼」をリセット
summary {
list-style: none;
&::-webkit-details-marker {
display: none;
}
}
.Accordion {
border: 2px solid #ccf;
&[open] {
.Accordion__Content {
animation: fadeIn 1s;
}
}
}
.Accordion__Summary {
width: 100%;
font-size: 18px;
position: relative;
padding: 20px;
//背景色を変える
background-color: #ccf;
color: #33c;
text-align: left;
// 「＋」「－」の装飾
&::before,
&::after {
position: absolute;
top: 50%;
display: block;
width: 16px;
height: 2px;
content: "";
background-color: currentColor;
right: 30px;
}
&::before {
transform: translateY(-50%);
will-change: transform;
}
&::after {
transform: translateY(-50%) rotate(-90deg);
transition: transform 0.5s;
-webkit-transition: transform 0.5s;
will-change: transform;
}
.Accordion[open]:not([data-accordion-before-close]) &::after {
transform: translateY(-50%);
will-change: transform;
}
}
.Accordion__Content {
overflow: hidden;
z-index: 2;
> p {
//出現するコンテンツの表示域
padding: 20px;
}
}
自分で試したこと
考えられる要因としては、transitionかtransformがうまく機能していないと考えられる。
上記のコードの動きをsafariで確認するとクリック時にマイナスアイコンに切り替わることから原因はtransitionではないかと推測した。
・シンプルに-webkit-transition: transform 0.5s;を追記したが、うまくいかなかった。
・transformを指定している箇所にwill-change: transform;を追記したが、うまくいかなかった。
参考文献
0