几年前我制作了一个 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%”值，那么如何强制它保留它；