safariで表示した際のレイアウトがどうしても崩れてしまう

Question

困っている事

safariのみでＣＳＳが崩れてしまう…

内容

ChromeやEdgeではすごく綺麗に整っているレイアウトもsafariになるとどうしてもレイアウトが崩れてしまいます…
ipad用のに作ったwebアプリなのでどうしてもsafariで綺麗なレイアウトにしたいです。
自分なりに色々調べてみてCSSハックのやり方や、改善策を全体的に試しているのですがどうしても上手くいかず…
フォントもChromeと同じにしたいのですが合わせられません…
15日ほど足止めを食らっています…

該当のソースコード

HTML
<span class="catalogue" style="--i:5;--x:-1;--y:-1;"><ion-icon name="car-sport-outline"></ion-icon>

<li class="around10" style="--i:9;"> <img src="img/ROADSTER.png" alt="ROADSTER"> <p class="car-name-ROADSTER">ROADSTER</p> <p class="car-size-ROADSTER">3,915×1,735×1,235</p> </li> </span>

CSS
白丸枠、action前CSS
.catalogue li {
color: #000000;
scale: 0;
position: absolute;
left: 30px;
top: 20px;
transform-origin: 0px;
background: #ffffff;
transition: 1s;
transform: rotate(calc(360deg/10 * var(--i)));
list-style: none;
width: 10px;
height: 10px;
justify-content: center;
align-items: center;
border-radius: 50%;
box-shadow: 0 3px 4px rgba(0, 0, 0, 0.20);

}
白丸枠、action後CSS
.catalogue.action li {
position: absolute;
left: -265px;
top: 30px;
list-style: none;
transition: 1s;
transform: rotate(calc(360deg/10 * var(--i)));
transform-origin: 370px;
scale: 1;
width: 165px;
height: 165px;
background: #ffffff;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
box-shadow: 0 3px 4px rgba(0, 0, 0, 0.20);
}
画像CSS
.catalogue li img {
transform: rotate(calc(360deg/-10 * var(--i)));
scale: 0;
transition: 0.4s;
display: inline-block;
align-items: center;

}
「ROADSTER」、CSS
.car-name-ROADSTER {
position: absolute;
top: 35px;
left: 36px;
font-size: 25px;
font-weight: 20px;
color: #000000;
transform: rotate(calc(360deg/-10 * var(--i)));
font-family: 'Roboto', sans-serif;

}
「3,915×1,735×1,235」、CSS
.car-size-ROADSTER {
position: absolute;
top: 112px;
left: -8px;
font-size: 12px;
font-weight: 20px;
color: #000000;
transform: rotate(calc(360deg/-10 * var(--i)));
font-family: 'Roboto', sans-serif;

}

対象画像

Chromeのレイアウト

safariのレイアウト

Comments

[int32_t]

質問文の画像で、どこが崩れていて、どうなればOKなのでしょうか。

[sibazi]

コメントありがとうございます。
上画像のChromeのレイアウト画像と全く同じもしくは近しいものにしたいです…

[int32_t]

フォントが違うようなので、全く同じにはなりません。
どこがおかしいと考えているか具体的に書いてください。ROADSTERの文字がおかしいのですか、車の画像がおかしいのですか、数値がおかしいのですか、白丸がおかしいのですか。

[int32_t]

あと、画像のサイズや around10 のスタイルなど、状況を再現できる情報すべてがないと助言は難しいです。

[sibazi]

詳しく聞いて頂き本当にありがとうございます。
フォントは違う状態で大丈夫です。
直したい点は現在私はWindowsPCしか持っておらず、Chromeの検証でipadの画面サイズに合わせて作成を進めています。
ですがいざipadのsafariで開いてみると「ＲＯＡＤＳＴＥＲ」の車の文字が白い丸枠に収まっていなかったり、車の大きさ（画像でいえば3915×1735×1235の文字）がChromeの検証と比べて左に寄って丸枠からはみ出ているしおそらく白枠にたいして文字が小さくなっているようにも見えます。
それをすべてipadでもChromeの検証でみているような形にしたいと考えています。
around10というのいうのはaround1-10まで同じ形のliを作成していてスタイルなどは特に設定していないのですが、どうやって丸枠に指定しているかというとspanの要素の中にaround1-10(li要素）を入れている状態なのでHTMLとCSSはこちらになります。
HTML
<span class="catalogue" style="--i:5;--x:-1;--y:-1;"><ion-icon name="car-sport-outline"></ion-icon>
CSS
.catalogue li {
color: #000000;
scale: 0;
position: absolute;
left: 30px;
top: 20px;
transform-origin: 0px;
background: #ffffff;
transition: 1s;
transform: rotate(calc(360deg/10 * var(--i)));
list-style: none;
width: 10px;
height: 10px;
justify-content: center;
align-items: center;
border-radius: 50%;
box-shadow: 0 3px 4px rgba(0, 0, 0, 0.20);

}

.catalogue.action li {
position: absolute;
left: -265px;
top: 30px;
list-style: none;
transition: 1s;
transform: rotate(calc(360deg/10 * var(--i)));
transform-origin: 370px;
scale: 1;
width: 165px;
height: 165px;
background: #ffffff;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
box-shadow: 0 3px 4px rgba(0, 0, 0, 0.20);
}
around1-10までをまとめてcatalogueというclsaa名にしてスタイルを設定しています。
catalogueを押すとactionが付与されて消えていたcatalogueが現れるというjavascriptを設定しているので、動作前と動作後のCSSを載せさせて頂きました。
画像サイズは幅が150ｐｘで高さが75ｐｘになります。

[sibazi]

すみません…上の文の「スタイルなどは特に設定していないのですが、」部分は自分でもよくわからない事を言っているので無視してください…

[int32_t]

問題を再現するための CSS と HTML をコメントに書くのではなく、質問文を更新してください。

フォントの差は仕方ないとして、けっきょくどういう意図で配置されればいいのですか? 車名・画像・サイズが中央揃えされていればいいですか。

[sibazi]

失礼いたしました。
はい、その通りです。
safariでの表示で白枠の中に文字が収まった状態で車名・画像・サイズが中央揃えされてほしいです…

Answer 1

状況を再現することはできませんでしたので、完全な修正案ではありません。

修正する方針です:

• <li> 全体を rotate させて、3つの要素それぞれ別個に逆回転させて位置を調整するという奇妙なことはやめましょう。なぜそんなことをしているのか理解できませんでした。最初から rotate させなければいいのですし、rotate しなければならない事情があるなら、3要素を囲む要素を作って逆回転させましょう。
• 上記が解決したら、<li> に flex-direction: column を付け、.car-name-ROADSTER と .car-size-ROADSTER の position: absolute を消します。.car-name-ROADSTER に order: 1、<img> に order: 2、.car-size-ROADSTER に order: 3 を付けて順番を入れ替えます。3要素の間隔はそれぞれの margin-top margin-bottom で調整します。

Comments

[sibazi]

綺麗に整えることが出来ました！！
本当にありがとうございました。