Safari 16.4 和 iOS 16.4 自行變更動態設定 CSS 屬性

幾年前我製作了一個 javascript 拼圖遊戲，它運作得很好。最近，在 iOS 16.4 和 Safari 16.4 更新後，程式碼無法以相同的方式運作，經過調查後我發現了問題，但我不知道如何修復它。

在我的程式碼中，我像這樣動態設定了 2 個 CSS 屬性（背景大小和背景位置），並且之前在程式碼中設定了（gridSize、xpos 和 ypos）的值：

var li = $('<li class="item" data-value="' + (i) + '"></li>').css({
                'background-size': (gridSize * 100) + '%',
                'background-position': xpos + ' ' + ypos,
            });

現在檢查 safari 16.4 上的 li 元素顯示如下：

背景大小：300% 自動；背景位置：0%；

將「auto」新增至背景大小屬性和背景位置屬性只有一個值（儘管我在程式碼中將它們中的每一個設定為字串）

所以它應該是這樣的：

背景大小：300%；背景位置：0% 0%；

此行為僅發生在 ios 16.4（行動版 chrome 和 safari）和 MacOS Safari 16.4 上，並且在所有其他 Android 或 PC 裝置以及所有早期 iOS 或 Safari 版本中完美運行。

有關如何解決此問題以強制其在 Safari 16.4 上正常工作的任何建議

編輯1：

我嘗試像這樣分別設定 x 和 y 位置：

var li = $('<li class="item" data-value="' + (i) + '">. 
                </li>').css({
                'background-size': (gridSize * 100) + '%',
                'background-position-x': xpos,
                'background-position-y': ypos,
            });

但我得到了相同的結果，並且在「背景位置」中僅顯示一個值。

編輯2：

我甚至像這樣手動輸入值：

if (gridSize == 3) {
              if (i==0) {
                li.css('background-position', '0% 0%');
              } else if (i==1) {
                li.css('background-position', '50% 0%');
              } else if (i==2) {
                li.css('background-position', '100% 0%');
              } else if (i==3) {
                li.css('background-position', '0% 50%');
              } else if (i==4) {
                li.css('background-position', '50% 50%');
              } else if (i==5) {
                li.css('background-position', '100% 50%');
              } else if (i==6) {
                li.css('background-position', '0% 100%');
              } else if (i==7) {
                li.css('background-position', '50% 100%');
              } else if (i==8) {
                li.css('background-position', '100% 100%');
              }
            }

當我檢查時，它仍然省略一個值並留下另一個值（對於某些元素而不是其他元素）：

<li data-value="0" style="background-size: 300% auto; background-position: 0%;"></li>
<li data-value="1" style="background-size: 300% auto; background-position: 50%;"></li>
<li data-value="2" style="background-size: 300% auto; background-position: 100%;"></li>
<li data-value="3" style="background-size: 300% auto; background-position: 50%;"></li>
<li data-value="4" style="background-size: 300% auto; background-position: 50% 50%;"></li>
<li data-value="5" style="background-size: 300% auto; background-position: 100% 50%;"></li>
<li data-value="6" style="background-size: 300% auto; background-position: 100%;"></li>
<li data-value="7" style="background-size: 300% auto; background-position: 50% 100%;"></li>
<li data-value="8" style="background-size: 300% auto; background-position: 100% 100%;"></li>

所以現在我意識到它省略了「0%」值，那麼如何強迫它保留它；

P粉099985373268 天前358

Safari 16.4 和 iOS 16.4 自行變更動態設定 CSS 屬性

全部回覆(1)我來回復