Safariだとsummaryタグがflexコンテナに対応していない

https://note.com/takamoso/n/n32c4e6904cf7
https://ics-creative.github.io/220831_details_summary_accordion/demo2/index.html

summary{
display: flex;/* デフォルトアイコンを非表示 */
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 16px;
padding: 16px 0;
font-weight: bold;
transition: .1s;
}
summary::-webkit-details-marker {
display: none;/* for Safari */
}
summary:hover{
cursor: pointer;
opacity: .5;
}
details[open] summary{
margin-bottom: 16px;
}
summary::after {
flex-shrink: 0;
display: inline-block;
content:”;
width: 16px;
height: 16px;
background-color: transparent;
background-image: url(images/icon/chevron-down-solid.svg);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
opacity: .5;
transition: transform 0.2s;
}
details[open] summary::after {
transform: rotate(180deg);
}

WATANABE Takeshi
渡邉岳 / ウェブデザイナ / 愛猫家
WATANABE Takeshi

1981年新潟生まれ、千葉育ち。2007年よりウェブデザイナ・ディレクタとして、数社のウェブサイト設計および運用に従事したのち、2014年にフリーランスとして独立。同時に東京を離れて地方に移住。「侘び寂び」の哲学に基づき、感覚に頼らず、機能美を重視した、使い心地の良いウェブデザインを追求しています。猫と工作とブラストビートが好き。