J'ai créé un jeu de réflexion javascript il y a quelques années et cela a très bien fonctionné. Récemment, après les mises à jour iOS 16.4 et Safari 16.4, le code ne fonctionne pas de la même manière, après enquête j'ai trouvé le problème mais je ne sais pas comment le résoudre.

Dans mon code, j'ai défini dynamiquement 2 propriétés CSS (taille de l'arrière-plan et position de l'arrière-plan) comme ceci, et les valeurs de (gridSize, xpos et ypos) étaient précédemment définies dans le code :

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

Maintenant, l'inspection de l'élément li sur Safari 16.4 montre ceci :

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

L'ajout de "auto" à la propriété background size et à la propriété background position n'a qu'une seule valeur (même si j'ai défini chacune d'elles sur des chaînes dans le code)

Ça devrait donc ressembler à ceci :

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

Ce comportement ne se produit que sur iOS 16.4 (mobile Chrome et Safari) et MacOS Safari 16.4, et fonctionne parfaitement sur tous les autres appareils Android ou PC et toutes les versions antérieures d'iOS ou Safari.

Toutes des suggestions sur la façon de résoudre ce problème pour le forcer à fonctionner correctement sur Safari 16.4

Edit 1 :

J'ai essayé de définir les positions x et y séparément comme ceci :

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

Mais j'obtiens le même résultat et une seule valeur est affichée dans "Position d'arrière-plan".

Edit 2 :

J'ai même saisi les valeurs manuellement comme ceci :

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

Lorsque je vérifie, il omet toujours une valeur et en laisse une autre (pour certains éléments mais pas pour d'autres) :

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

Alors maintenant, je me rends compte qu'il omet la valeur "0%", alors comment le forcer à la conserver ;