transform適用要素がiPhoneのSafariでずれる

Question

実現したいこと

transform適用要素を、スマホの時も「PCでウィンドウ幅を狭めたとき」と同じ表示にしたい

発生している問題

transform適用要素がiPhoneのSafariでのみずれる

概要

楽器を奥行きのある形で、時計の針位置2，4，6，8，10に配置しています。
押したボタンによって楽器をくるくる回すプログラムをjavascriptで作りました。

楽器のラッパー要素を
メディアクエリで「transform: scale(0.4);」とすることによって
楽器全体の比率を保ったままスマホの時のみ縮小表示させています。

試しに下記デモURLをパソコンで開き、ウィンドウ幅を414px以下にしてみてください。
比率を保ったままスマホ用に縮小表示されているはずです。
chromeなら検証ツールを右側に表示してから検証ツールの領域を左に広げると414px以下にできます。

http://iroha123.starfree.jp/musicvenue/

しかしiPhoneのsafariで開いてみると楽器が時計の針位置からずれていることが確認できます。
androidのchromeではずれていませんでした。

仕様

①楽器にはposition:absoluteを指定し
②それぞれの楽器の位置はtopとleftの値で指定し、
③奥行きはtransform:translateZの値で指定しています。
④動かすときはcssのtransitionを使っています。

①はcssファイルに記述し、
②～④はjavascriptファイルで命令しています。
④はボタンを押したときに発火しますが、ボタンを押す前からすでにずれていますので後に提示したソースでは割愛しました。

ブレークポイントは
スマホ＝414pxまで
PC＝415pxから
です。

ソースコード

短い方がわかりやすいと思うので関係ありそうなところだけ抜粋します。
全体像が知りたい方は
http://iroha123.starfree.jp/musicvenue/
からお願いいたします。

<div class="main_back">
  <div class="main_back_inner">
    <img class="instrument instrument1 clock6" src="img/mike.png" alt="マイク">
    <img class="instrument instrument2 clock4" src="img/drum.png" alt="ドラム">
    <img class="instrument instrument3 clock2" src="img/guitar.png" alt="ギター">
    <img class="instrument instrument4 clock10" src="img/piano.png" alt="ピアノ">
    <img class="instrument instrument5 clock8" src="img/saxophone.png" alt="サックス">
    <img class="instrument spotlight" src="img/spotlight.png" alt="スポットライト">
  </div>
</div>

/*最上位要素*/
.main_back{
  background-image: url("../img/stage.gif");
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/*最上位要素の一つ下の階層*/
.main_back_inner{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  transform-style:preserve-3d;
  perspective:1000px;
}
/*楽器*/
.instrument{
  display: inline-block;
  position: absolute;
}
/*スポットライト*/
.spotlight{
  transform:translateZ(-150px);
  left: 336px;
  bottom: -9px;
  z-index: 9;
}
@media screen and (max-width: 414px) {
  .main_back{
    height: 145px;/*←縮小表示したときの子要素の実際のサイズ*/
    position: relative;
    background-size: 100% 145px;
    background-repeat: no-repeat;
    overflow: hidden;/*←縮小表示によって子要素に余白ができるので隠す*/
  }
  .main_back_inner{
    height: 421px;/*←PCの時の表示領域と等しい*/
    width: 946px;/*←PCの時の表示領域と等しい*/
    transform-origin: top left;
    transform: scale(0.4);/*縮小表示*/
    position: relative;
    top: -22px;
    left: calc((100% - 378px)/2);
  }
}

var selector_name_instrument = '.instrument';

//楽器を初期位置に移動させる
clock6($(selector_name_instrument + '1'));
clock4($(selector_name_instrument + '2'));
clock2($(selector_name_instrument + '3'));
clock10($(selector_name_instrument + '4'));
clock8($(selector_name_instrument + '5'));


//clock直後の数字は時計の針の位置。その位置に移動させる命令。
function clock6(selector) {
  selector.css('z-index', '10');
  selector.css('transform', 'translate3d(0, 0, -147px)');
  selector.css('left', '301px');
  selector.css('bottom', '30px');
}

function clock4(selector) {
  selector.css('z-index', '8');
  selector.css('transform', 'translate3d(0, 0, -300px)');
  selector.css('left', '743px');
  selector.css('bottom', '35px');
}

function clock2(selector) {
  selector.css('z-index', '7');
  selector.css('transform', 'translate3d(0, 0, -1000px)');
  selector.css('left', '661px');
  selector.css('bottom', '60px');
}

function clock10(selector) {
  selector.css('z-index', '7');
  selector.css('transform', 'translate3d(0, 0, -1000px)');
  selector.css('left', '-53px');
  selector.css('bottom', '60px');
}

function clock8(selector) {
  selector.css('z-index', '8');
  selector.css('transform', 'translate3d(0, 0, -300px)');
  selector.css('left', '-140px');
  selector.css('bottom', '35px');
}

試したこと

transformとiPhoneのsafariが相性が悪いとみて、グーグルで調べてみましたが下記のような結果に。。。

https://tada-fla.com/blog/20160110/ios-transform/
https://stackoverflow.com/questions/30128587/ios-safari-transition-transform-not-working
↑transitionさせる前（楽器を動かすボタンを押す前）からずれているので非該当

https://qiita.com/ttake/items/47c710142cbf57ff2adc
↑”親要素に”CSS perspectiveを追加済みなので非該当

https://sakura.monte-verita.biz/1254
↑translateZ(@)をtranslate3d(0, 0, @)にするも変わらず

行き詰まっています。。。。

補足情報（FW/ツールのバージョンなど）

iPhone OS = 13.2

追記情報

Macのsafariでユーザーエージェントをiphoneしてレスポンシブモードを使ってもズレが再現することがわかりました。
スマホの時だけおかしいなら、スマホのメディアクエリがおかしいと思い、
スマホ時のメディアクエリ内に記述した、楽器のラッパー要素のセレクタ内の命令を検証ツールで一つ一つ無効にしてみました。
すると「transform-origin: top left;」が原因であることがわかりました。
なぜこの命令をしていたかというと、「transform: scale(0.4);」するにあたって発生する余白をなくすために「position:relative」の「left: calc((100% - 378px)/2);」の値を設定するときに、計算をわかりやすくするためです。transformもpositionも左上起点なら計算できるからです。
ラッパー要素を増やして、余白をなくせるか引き続きチャレンジしてみます。

ラッパー要素は不要でした。
縮小表示命令したセレクタに
left: calc( 284px * -1 );
とすることによって親要素の左端ぴったりに配置し、そのうえで
margin-left: calc((100% - 378px)/2);
とすることによって左右方向の中央揃えで配置できました。
上記leftの値の284pxというのは縮小前の大きさの半分から縮小後の大きさの半分を引いたものです。
上記margin-leftの値の378pxというのは縮小後の大きさです。
これによってズレも消し去り、余白も消し去り、当初抱えていた問題はなくなりました。

Answer 1

「transform: scale(@);」で拡大縮小率を設定したときに、transform-originの値を初期値（50% 50% 0）以外にすると、iPhoneのsafariで他ブラウザと違う表示になるようです。

今回はtransform-origin設定個所をcssから削除することによって、transform-originの値を初期値のままにして対処しました。

ページデザインによってはtransform-originを左上にしたり右下にしたりしたいときもあると思うのですが、そういうときどうすればいいのかはわかりませんでしたが、今回はtransform-originは中央基点で対応できましたので追求しません。