幾年前我制作了一個(gè) javascript 拼圖游戲,它運(yùn)行得很好。 最近,在 iOS 16.4 和 Safari 16.4 更新后,代碼無法以相同的方式工作,經(jīng)過調(diào)查后我發(fā)現(xiàn)了問題,但我不知道如何修復(fù)它。
在我的代碼中,我像這樣動(dòng)態(tài)設(shè)置了 2 個(gè) CSS 屬性(背景大小和背景位置),并且之前在代碼中設(shè)置了(gridSize、xpos 和 ypos)的值:
var li = $('<li class="item" data-value="' + (i) + '"></li>').css({ 'background-size': (gridSize * 100) + '%', 'background-position': xpos + ' ' + ypos, });
現(xiàn)在檢查 safari 16.4 上的 li 元素顯示如下:
背景大?。?00% 自動(dòng);背景位置:0%;
將“auto”添加到背景大小屬性和背景位置屬性只有一個(gè)值(盡管我在代碼中將它們中的每一個(gè)設(shè)置為字符串)
所以它應(yīng)該是這樣的:
背景大?。?00%;背景位置:0% 0%;
此行為僅發(fā)生在 ios 16.4(移動(dòng)版 chrome 和 safari)和 MacOS Safari 16.4 上,并且在所有其他 Android 或 PC 設(shè)備以及所有早期 iOS 或 Safari 版本中完美運(yùn)行。
有關(guān)如何解決此問題以強(qiáng)制其在 Safari 16.4 上正常工作的任何建議
編輯1:
我嘗試像這樣分別設(shè)置 x 和 y 位置:
var li = $('<li class="item" data-value="' + (i) + '">. </li>').css({ 'background-size': (gridSize * 100) + '%', 'background-position-x': xpos, 'background-position-y': ypos, });
但我得到了相同的結(jié)果,并且“背景位置”中僅顯示一個(gè)值。
編輯2:
我什至像這樣手動(dòng)輸入值:
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%'); } }
當(dāng)我檢查時(shí),它仍然省略一個(gè)值并留下另一個(gè)值(對于某些元素而不是其他元素):
<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>
所以現(xiàn)在我意識到它省略了“0%”值,那么如何強(qiáng)制它保留它;
經(jīng)過一番努力,我找到了一個(gè)有效的解決方案:
我在 xpos
和 ypos
的值中添加了 0.000001,因此,如果值為 0,我會阻止 Safari 將其視為絕對 0……然后瞧強(qiáng)>,它就像一個(gè)魅力。