常連

IT初心者で基本的なことかもしれませんが、皆様からご教示いただきたいです。

# ご教示いただきたいこと
**「ブラウザによって証明書が有効・無効が異なるのは、どのような原因があるのでしょうか。」**

# 質問の背景
本日「edex.adobe.com」というアドビのサイトへ、初めてアクセスしました。
● Chromeブラウザを使うと、以下のエラーが表示されます。
``` エラー文
この接続ではプライバシーが保護されません
攻撃者が、edex.adobe.com 上のあなたの情報（パスワード、メッセージ、クレジット カード情報など）を不正に取得しようとしている可能性があります。
```

● 一方でSafariブラウザを使うと、問題なくWebサイトへアクセスすることができます。


# 分かっていること
Chromeブラウザでエラーが表示されるのは、
「無効な証明書を使っているから」というのは分かっています。

また、今回のドメインへは初めてのアクセスのため、
ブラウザのキャッシュも関係なさそうです。
（証明書にキャッシュが関係なければご指摘いただけると非常に嬉しいです。）
 
 
どうぞよろしくお願いいたします。

ブラウザによって証明書が無効になるのは、何故でしょうか。

windows１０で開発しているのですが、safariの動作確認はどのようにしたらよいのでしょうか？

普段はchrome使っていて、そこの検証でスマホの形のところから端末選んだりはできるのですが、ブラウザは選べませんよね？

実際にそのブラウザでやろうと思ったのですが、Windows用のsafariがもうないみたいで、どうしたものかと。。。

一応普段使っている携帯はiPhoneなのでどうにかしたらできるのかな？とも思うのですが、わからなかったので質問させていただきました。

やりたいことは、windowsで現在開発しているプロジェクトのサファリでの表示の確認です。

以上です。経験したことのある方や、何かわかる方いましたらよろしくお願いいたします

windowsで開発。safariの動作確認

###前提・実現したいこと
初歩的な質問ですみません。

PCでgoogle apps scriptにてスプレッドシートに作成した簡単なプログラムを
スプレッドシートを開いて動作させているのですが、同じスプレッドシートを
ipadやiphoneでログインして動作させるにはどうすればよいのでしょうか？
該当のスプレッドシートは開くのですが、PCではあったメニュー部がなく、
どうやって開いて、動作させればいいのか判りません。
それとも、iPadやiphoneは無理なのでしょうか？
safariとchromeを試しましたが、いづれもシートが開くのみです。
アンドロイド端末が手元になく、確認していません。
動作確認は、windowsのIE11のみです。

google apps scriptでスプレッドシートに作成した関数をipadやiphoneで動作させるには？

### 前提

selectタグでドロップダウンメニューを内包したWebサイトを作っています。

### 実現したいこと

safariを使った時だけ、selectにCSSが効いていないように感じます。また、ドロップダウンメニューの位置もずれて表示されています。これをFirefoxやChromeのブラウザと同じようにしたいです。

### 該当のソースコード

```searchFromMakers.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<title>searchFromMakers</title>
<style>
#searchFromMakers{
  display: flow-root;/*prevent margin offset*/
  box-shadow: 5px 0 13px 0px rgba(71,102,102, 0.5);
  width: 415px;
}
#searchFromMakers h1{
  margin: 0;
  margin-left: 15px;
  color: rgb(121, 121, 121, 0.5);
}
.options{
  display: flex;
  padding-left: 10px; 
  margin-top: 10px;
}
.options p{
  margin: 0;
  padding-left: 10px;
}
.options select{
  margin-left: 5px;
  color: rgb(121, 121, 121, 0.5);/*https://note.spiqa.design/select-color/#option%E3%81%ABCSS%E3%81%AF%E5%8A%B9%E3%81%8B%E3%81%AA%E3%81%84*/
}
/*_::-webkit-full-page-media, :root, .options select{/*0803*/
  /*margin-left: 5px;
  color: rgb(121, 121, 121, 0.5);/*https://note.spiqa.design/select-color/#option%E3%81%ABCSS%E3%81%AF%E5%8A%B9%E3%81%8B%E3%81%AA%E3%81%84*/
/*}*/
#showLine{
  display: flex;
  background-color: rgb(121, 121, 121, 0.1);
  padding-left: 10px;
  margin-top: 20px;
}
.carType_mini{
  width: 122px;
  margin: 5px;
}
.carType_mini img{
  border: 1px solid #797979;
}
.lower_mini{
  display: flex;
  justify-content: space-between;
  height: 20px;
}
.lower_mini p{ 
  width: 100%;
  margin: 0;
  font-size: 12px;
}
input[type=checkbox] {
display: none;
}
.checkbox{
    box-sizing: border-box;
    display: inline-block;
    margin-right: 10px;
    position: relative;
    width: 15px;
    cursor: pointer;
}
.checkbox::before {
    border: 1px solid #797979;
    content: '';
    display: block;
    height: 16px;
    left: 5px;
    margin-top: -8px;
    position: absolute;
    top: 50%;
    width: 16px;
}
.checkbox::after {
    border-right: 3px solid #ed7a9c;
    border-bottom: 3px solid #ed7a9c;
    content: '';
    display: block;
    height: 9px;
    left: 10px;
    margin-top: -7px;
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: rotate(45deg);
    width: 5px;
}
input[type=checkbox]:checked + .checkbox::after {
    opacity: 1;
}

#optionSearch h2{/*0723 ここが効いていない*/
margin: 0;
border-left: 5px solid red;
padding-left: 10px;
color: red;
}
select{
cursor: pointer;
}
.options, .mission{/*同じだから消せる*/
  display: flex;
  padding-left: 10px;
  margin-top: 10px;
}
.options p{/*同じだから消せる*/
  margin: 0;
  padding-left: 10px;
}
.options select{/*同じだから消せる*/
  margin-left: 5px;
  color: rgb(121, 121, 121, 0.5);/*https://note.spiqa.design/select-color/#option%E3%81%ABCSS%E3%81%AF%E5%8A%B9%E3%81%8B%E3%81%AA%E3%81%84*/
}
.mission p{/*同じだから消せる*/
  padding-left: 10px;
}

/*toggle switch*/
.toggle {
  position: relative;
  width: 90px;
  height: 24px;
  margin-top: 15px;
  margin-left: 15px;
  user-select: none;
  cursor: pointer;
}
.toggle input[type=checkbox] {
  display: none;
}
.toggle span {
  position: absolute;
  top: 7px;
  font-size: 12px;
  font-weight: bold;
  line-height: 1;
  -webkit-transition: 0.2s ease-out;
  transition: 0.2s ease-out;
}
.toggle span:nth-of-type(1) {
  right: 16px;
  color: rgba(0, 0, 0, 0.175);
}
.toggle span:nth-of-type(2) {
  left: 16px;
  color: white;
  z-index: 2;
}
.toggle.checked span:nth-of-type(1) {
  right: 15px;
  color: white;
  z-index: 2;
}
.toggle.checked span:nth-of-type(2) {
  left: 15px;
  color: rgba(0, 0, 0, 0.175);
}
.toggle:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50px;
  display: block;
  background: #FFF;
  -webkit-transition: 0.2s ease-out;
  transition: 0.2s ease-out;
  border: 1px solid rgb(121, 121, 121, 0.5);
}
.toggle:after {
  content: "";
  position: absolute;
  width: 45px;
  height: 24px;
  display: block;
  border-radius: 50px;
  background: #336666;
  box-shadow: 0 9px 28px -6px rgba(0, 0, 0, 0.3);
  -webkit-transition: 0.2s ease-out;
  transition: 0.2s ease-out;
  margin-top: 1px;/*prevent the effect of border*/
}
.toggle.checked:before {
  background: #FFF;
}
.toggle.checked:after {
  left: 46px;/*moving*/
  box-shadow: 0 9px 28px -6px rgba(0, 0, 0, 0.5);
}
.searchButton{/*同じから消す*/
margin: 0 auto;/*center the box*/
margin-bottom: 20px;
text-align: center;/*center the a elements a*/
background: #336666;
padding-top: 10px;
width: 50%;
height: 35px;
}
.searchButton a{/*同じから消す*/
text-decoration: none;
color: #FFF;
}
.searchButton img{/*同じから消す*/
width: 15px;
height: 15px;
margin-left: 10px;
}

@media (min-width: 1025px) {/*PC版*/
}


@media screen and  (max-width:1024px) {/*スマホ・タブレット版*/
}

</style>

</head>
<body>
<div id="searchFromMakers">
  <h1>メーカから探す</h1>

  <div class="options">
      <p>メーカー</p>

      <select name="maker" onchange="changeColor(this)">
        <option class="example1" value="">日産</option>
        <option id="nissan">日産</option>
        <option id="toyota">トヨタ</option>
        <option id="matsuda">マツダ</option>
        <option id="daihatu">ダイハツ</option>
        <option id="suzuki">スズキ</option>
      </select>
      <p>車種</p>
      <select name="model" onchange="changeColor(this)">
        <option id="example3" value="">軽自動車</option>
        <option id="kei">軽自動車</option>
        <option id="compact">コンパクトカー</option>
        <option id="miniban">ミニバン</option>
        <option id="sedan">セダン</option>
        <option id="qube">クーペ</option>
        <option id="stationWagon">ステーションワゴン</option>
        <option id="SUV">SUV・クロカン</option>
        <option id="openCar">オープンカー</option>
        <option id="oneBox">ワンボックス</option>
      </select>
    </div>

  <div id="showLine">
  <div class="carType_mini">
    <img src="assets/img/nissan_dayz_roox.png" alt="nissan_dayz_roox">
    <div class="lower_mini">
     <p>デイズ　ルークス</p>
     <input type="checkbox" id="days_roox_check" name="check"><label for="days_roox_check" class="checkbox"></label>
    </div>
  </div>
  <div class="carType_mini">
    <img src="assets/img/nissan_dayz.png" alt="nissan_dayz">
    <div class="lower_mini">
     <p>デイズ</p>
     <input type="checkbox" id="dayz_check" name="check"><label for="dayz_check" class="checkbox"></label>
    </div>
  </div>
  <div class="carType_mini">
    <img src="assets/img/nissan_clipper.png" alt="nissan_clipper">
    <div class="lower_mini">
     <p>クリッパー</p>
     <input type="checkbox" id="clipper_check" name="check"><label for="clipper_check" class="checkbox"></label>
    </div>
  </div>
  </div>

  <div id="optionSearch">
    <h2>オプション検索</h2>
    <div class="options">
      <p>排気量　</p>
      <select name="displacement" onchange="changeColor(this)">
        <option id="example2" value="">660CC</option>
        <option id="1500">1500CC</option>
        <option id="2000">2000CC</option>
        <option id="3000">3000CC</option>
      </select>
    </div>
    <div class="mission">
      <p>AT/MT</p>
      <div class="toggle">
        <input type="checkbox" name="check" />
        <span>MT</span>
        <span>AT</span>
      </div>
    </div>
  </div>

  <div class="searchButton">
    <a href="history.html"><span>この条件で探す</span><img src="assets/img/basicArrow_#cccccc.png" alt=">"/></a>
  </div>
</div>

<script type="text/javascript">
'use strict';

//options
function changeColor(hoge){
    if( hoge.value == 0 ){
        hoge.style.color = '';
    }else{
        hoge.style.color = 'black';
    }
}

//toggle switch
$(".toggle").on("click", function() {
  $(".toggle").toggleClass("checked");
  if(!$('input[name="check"]').prop("checked")) {
    $(".toggle input").prop("checked", true);
  } else {
    $(".toggle input").prop("checked", false);
  }
});

</script>
</body>

</html>
```

### 試したこと

_::-webkit-full-page-media, :root, .options select{
  margin-left: 5px;
  color: rgb(121, 121, 121, 0.5);
}
のように、_::-webkit-full-page-media, :rootをつけてみました。


safariのみselectにCSSが効かない

videoタグの再生ボタンを非表示にしたいです。

【現状】
背景動画を設置したのですが低電力モードに設定していると再生されないので代わりに背景画像を表示させているのですが、再生ボタンが表示されて見栄えが悪くなってしまいます。

・低電力モード時 ※↓画像(再生ボタンが表示)
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-05-17/8a05e033-a88f-45d3-8860-7fa6fa5e4471.png)

・低電力モード解除時　※↓動画(自動再生します)
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-05-17/141b5eea-4313-4d26-a171-19ce51048e26.png)


【試したこと】
１.ググってみたら、videoタグに「controls」を外すと再生ボタンは表示されない。という記事を見て試したのですが、結果は変わらずの状態です

２.safariでソースコードをみたらhtmlに「シャドウコンテンツ(ユーザーエージェント)」というのがあり開いてみたらソースコード上で再生ボタンを編集できたので実際にcssを書いたのですが反映はされませんでした。
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-05-17/40f68f45-5ce1-4402-bbf7-31369229e8c4.png)

【質問】
背景画像が表示される際に再生ボタンを非表示にする方法を教えてください。


・html
```ここに言語を入力
<video class="video" poster="img/bg_img.jpg" autoplay muted loop playsinline>
  <source src="video/bg_video.mp4" type="video/mp4">
  <source src="video/bg_video.ogv" type="video/ogv">
  <source src="video/bg_video.webm" type="video/webm">
</video>
```

・css
```ここに言語を入力
.video{
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100vh;
  object-fit: cover;
}
```

再生ボタンを非表示にしたい

### 前提・実現したいこと

Google Apps Script で作成した Web アプリケーションに、Google Drive 上の画像ファイルを Google Chrome で表示したい。

Google Apps Script、Google Drive、Google Chrome は同一の Google アカウントでログインしています。
(Google Chrome は同期の設定もこのアカウントで行っています。)
Google アカウントは G Suite ではない通常の @gmail.com ドメインです。
Windows 10 で動かしているブラウザでの話です。

また画像ファイルの共有設定は「非公開 - 自分だけがアクセスできます」となっています。
共有設定を「オン」にすれば、PC(Chrome、Chromium版Edge)でも画像が表示されますが、自分しか利用しないため不要な共有はしたくありません。

### 発生している問題・エラーメッセージ

PC(Chrome、Chromium版Edge)とiPhone(Safari)ではソースの４パターンすべてが画像が表示されずリンク切れとなりますが、PC(Firefox、旧版Edge)では画像が表示されます。
Androidは環境が無いので未確認です。

### 該当のソースコード

- appsscript.json
```JSON
{
  "timeZone": "Asia/Tokyo",
  "dependencies": {
  },
  "webapp": {
    "access": "MYSELF",
    "executeAs": "USER_DEPLOYING"
  },
  "exceptionLogging": "STACKDRIVER",
  "runtimeVersion": "V8"
}
```

- Code.gs
```JavaScript
function doGet() {
  return HtmlService.createTemplateFromFile("index").evaluate();
}

function getFileUrl(id){
  var url = DriveApp.getFileById(id).getDownloadUrl();
  return url;
}

function getFileUrl2(id){
  var url = DriveApp.getFileById(id).getDownloadUrl();
  return url + '&access_token=' + ScriptApp.getOAuthToken();
}
```
- index.html
```HTML
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <p>通常？</p>
    <img src="https://drive.google.com/uc?export=view&id=(画像ファイルのID)">
    <hr>
    <p>usb=sharing付き</p>
    <img src="https://drive.google.com/uc?export=view&id=(画像ファイルのID)&usp=sharing">
    <hr>
    <p>ダウンロードURLをIDから動的に取得(アクセストークンなし)</p>
    <img src="<?=getFileUrl("(画像ファイルのID)")?>">
    <hr>
    <p>ダウンロードURLをIDから動的に取得(アクセストークンあり)</p>
    <img src="<?=getFileUrl2("(画像ファイルのID)")?>">
  </body>
</html>
```

### 試したこと

- 画像の URL を
https://drive.google.com/uc?export=view&id=(画像のファイルID)&usp=sharing
に変えてみましたが結果は変わらず。

- [Qiita で該当しそうな記事](https://qiita.com/TechnoKuRo/items/622c3dcc2ff3f7e09474)を見つけたので、ここで見つけたことを試してみましたが変わりませんでした。

---
[2020-05-05 追記]
```HTML
<!DOCTYPE html>
<html>
  <body>
    <img src="https://drive.google.com/uc?export=view&id=(画像ファイルのID)">
    <img src="https://drive.google.com/uc?export=view&id=(画像ファイルのID)&usp=sharing">
  </body>
</html>
```
これだけのHTMLファイルをPCローカルで作成し、各ブラウザで開いて見ましたが、ChromeとChromium版Edgeだけでリンク切れになるようです。
どうもこの結果から GAS とは関係なく、Windows 版の Chrome 系と Google Drive の問題なのかもしれません。

GASで公開したWebサイトにGoogle Drive上の画像ファイルを表示できない

長めの文章の中で「任意の場所で改行させたい」「改行で分断させたくない」ものがあります
そこで `"white-space: nowrap" ` を使うことにしました
```html
<style>.nbr {white-space: nowrap }</style>
<p>
  <span class="nbr">改行の位置を</span><span class="nbr">好きな場所で</span><span class="nbr">できるようにしたい</span>
</p>
``` 
このような文章で、極端に横幅を狭くすると、PCブラウザ（chrome,Edge）やAndroidブラウザの場合は、下記の通り目的どおり表示されます
```html
改行の位置を
好きな場所で
できるようにしたい
```
しかし、iPhone(XS)のsafari(ver15.2)で見てみると1行になり、はみ出してしまいます
```html
改行の位置を好きな場所でできるようにしたい
```
`<span>`の間に半角スペースまたは改行をいれると、safariも目的のとおりに表示してくれます
```html
<style>.nbr {"white-space: nowrap" }</style>
<p>
  <span class="nbr">改行の位置を</span>
  <span class="nbr">好きな場所で</span>
  <span class="nbr">できるようにしたい</span>
</p>
``` 
しかしながら、この場合、不要なスペースが入り込むので避けたいと思っています

このような現象を抑制する方法はあるでしょうか？
また挙動としては、safariが正しいのでしょうか？

よろしくお願いします。

様々な回答がありがとございます。
今のところ、次のような結果となりました。
- nbr 英字はOK、日本語はNG
- word-break 英字NG、日本語NG
- white-space 英字NG、日本語OK（iPhoneSafariはNG）

PCとiPhoneの両方で「改行させたくない文章は改行させない」
という条件をみたすことができていません

テストコードを作ってみました
```
<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width" />
  <title>TEST</title>
  <style>
	body {background-color: white;}
	h3 {margin:0}
	#box1 {width: 150px; background-color: lightblue;}
	#box2 {width: 300px; background-color: pink;}
	#box3 {width: 550px; background-color: lightgreen;}
	.box { font-size:0.9em; margin: 10px; padding:10px;}
    .keep-all {word-break: keep-all}
    .nowrap {white-space: nowrap}
  </style>
</head>
<body>
<div id="box1">
	<div class="box"><h3>なし</h3>
	abcdefhijklmnopqrstuvwxyzabcdefhijklmnopqrstuvwxyzabcdefhijklmnopqrstuvwxyz<br>
	あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん
	</div><div class="box">	<h3>wbr</h3>
	abcdefhijlmnopqrstuvwxyZ<wbr>abcdefhijlmnopqrstuvwxyZ<wbr>abcdefhijlmnopqrstuvwxyz<br>
	あいうえおかきくけこさしすせそー<wbr>たちつてとなにぬねのはひふへほー<wbr>まみむめもやゆよらりるれろわをん
	</div><div class="box">	<h3>nowrap</h3>
	<span class="nowrap">abcdefhijlmnopqrstuvwxyZ</span><span class="nowrap">abcdefhijlmnopqrstuvwxyZ</span><span class="nowrap">abcdefhijlmnopqrstuvwxyz</span><br>
	<span class="nowrap">あいうえおかきくけこさしすせそー</span><span class="nowrap">たちつてとなにぬねのはひふへほー</span><span class="nowrap">まみむめもやゆよらりるれろわをん</span>
	</div><div class="box">	<h3>keep-all</h3>
	<span class="keep-all">abcdefhijlmnopqrstuvwxyZ</span><span class="keep-all">abcdefhijlmnopqrstuvwxyZ</span><span class="keep-all">abcdefhijlmnopqrstuvwxyz</span><br>
	<span class="keep-all">あいうえおかきくけこさしすせそー</span><span class="keep-all">たちつてとなにぬねのはひふへほー</span><span class="keep-all">まみむめもやゆよらりるれろわをん</span>
	</div>
</div>
<div id="box2">
	<div class="box"><h3>なし</h3>
	abcdefhijklmnopqrstuvwxyzabcdefhijklmnopqrstuvwxyzabcdefhijklmnopqrstuvwxyz<br>
	あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん
	</div><div class="box">	<h3>wbr</h3>
	abcdefhijlmnopqrstuvwxyZ<wbr>abcdefhijlmnopqrstuvwxyZ<wbr>abcdefhijlmnopqrstuvwxyz<br>
	あいうえおかきくけこさしすせそー<wbr>たちつてとなにぬねのはひふへほー<wbr>まみむめもやゆよらりるれろわをん
	</div><div class="box">	<h3>nowrap</h3>
	<span class="nowrap">abcdefhijlmnopqrstuvwxyZ</span><span class="nowrap">abcdefhijlmnopqrstuvwxyZ</span><span class="nowrap">abcdefhijlmnopqrstuvwxyz</span><br>
	<span class="nowrap">あいうえおかきくけこさしすせそー</span><span class="nowrap">たちつてとなにぬねのはひふへほー</span><span class="nowrap">まみむめもやゆよらりるれろわをん</span>
	</div><div class="box">	<h3>keep-all</h3>
	<span class="keep-all">abcdefhijlmnopqrstuvwxyZ</span><span class="keep-all">abcdefhijlmnopqrstuvwxyZ</span><span class="keep-all">abcdefhijlmnopqrstuvwxyz</span><br>
	<span class="keep-all">あいうえおかきくけこさしすせそー</span><span class="keep-all">たちつてとなにぬねのはひふへほー</span><span class="keep-all">まみむめもやゆよらりるれろわをん</span>
	</div>
</div>
<div id="box3">
	<div class="box"><h3>なし</h3>
	abcdefhijklmnopqrstuvwxyzabcdefhijklmnopqrstuvwxyzabcdefhijklmnopqrstuvwxyz<br>
	あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん
	</div><div class="box">	<h3>wbr</h3>
	abcdefhijlmnopqrstuvwxyZ<wbr>abcdefhijlmnopqrstuvwxyZ<wbr>abcdefhijlmnopqrstuvwxyz<br>
	あいうえおかきくけこさしすせそー<wbr>たちつてとなにぬねのはひふへほー<wbr>まみむめもやゆよらりるれろわをん
	</div><div class="box">	<h3>nowrap</h3>
	<span class="nowrap">abcdefhijlmnopqrstuvwxyZ</span><span class="nowrap">abcdefhijlmnopqrstuvwxyZ</span><span class="nowrap">abcdefhijlmnopqrstuvwxyz</span><br>
	<span class="nowrap">あいうえおかきくけこさしすせそー</span><span class="nowrap">たちつてとなにぬねのはひふへほー</span><span class="nowrap">まみむめもやゆよらりるれろわをん</span>
	</div><div class="box">	<h3>keep-all</h3>
	<span class="keep-all">abcdefhijlmnopqrstuvwxyZ</span><span class="keep-all">abcdefhijlmnopqrstuvwxyZ</span><span class="keep-all">abcdefhijlmnopqrstuvwxyz</span><br>
	<span class="keep-all">あいうえおかきくけこさしすせそー</span><span class="keep-all">たちつてとなにぬねのはひふへほー</span><span class="keep-all">まみむめもやゆよらりるれろわをん</span>
	</div>
</div>

</body>
</html>
```

その結果がこちらになります。
改行を期待するところを英字はZ,日本語は「ー」を入れています
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-04-22/043e77b8-1d2d-4eae-8dd5-297df248bbe9.png)

そして肝心のiPhone safariですが、改行してくれません
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-04-22/e6e67fcd-7de2-47ae-ab06-328546697244.png)


"white-space: nowrap" が safari では挙動が違う

### 困っている事

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のレイアウト
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-03-23/f4986243-c393-47dd-9457-1dcd4b13bcff.jpeg)
safariのレイアウト
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-03-23/2c6dd74a-c472-4c87-ab61-d6501756f2b1.jpeg)


