Ich habe vor ein paar Jahren ein Javascript-Puzzlespiel gemacht und es hat einwandfrei funktioniert. Kürzlich, nach iOS 16.4- und Safari 16.4-Updates, funktioniert der Code nicht mehr auf die gleiche Weise. Nach einer Untersuchung habe ich das Problem gefunden, weiß aber nicht, wie ich es beheben kann.

In meinem Code habe ich 2 CSS-Eigenschaften (Hintergrundgröße und Hintergrundposition) dynamisch wie folgt festgelegt, und die Werte von (gridSize, xpos und ypos) wurden zuvor im Code festgelegt:

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

Die Untersuchung des Li-Elements in Safari 16.4 zeigt Folgendes:

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

Das Hinzufügen von „auto“ zur Eigenschaft „Hintergrundgröße“ und zur Eigenschaft „Hintergrundposition“ hat nur einen Wert (auch wenn ich sie im Code jeweils auf Zeichenfolgen gesetzt habe)

So sollte es so aussehen:

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

Dieses Verhalten tritt nur unter iOS 16.4 (Mobile Chrome und Safari) und MacOS Safari 16.4 auf und funktioniert perfekt auf allen anderen Android- oder PC-Geräten und allen früheren iOS- oder Safari-Versionen.

Irgendwelche Vorschläge zur Behebung dieses Problems, damit es unter Safari 16.4 ordnungsgemäß funktioniert

Edit 1:

Ich habe versucht, die x- und y-Positionen folgendermaßen getrennt festzulegen:

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

Aber ich erhalte das gleiche Ergebnis und nur ein Wert wird in „Hintergrundposition“ angezeigt.

Edit 2:

Ich habe die Werte sogar manuell so eingegeben:

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%');
              }
            }

Wenn ich nachschaue, wird immer noch ein Wert weggelassen und ein anderer übrig gelassen (für einige Elemente, andere jedoch nicht):

<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>

Jetzt ist mir klar geworden, dass der Wert „0 %“ weggelassen wird. Wie kann ich ihn also zwingen, ihn beizubehalten ;