Safari 16.4 dan iOS 16.4 menukar sifat CSS secara dinamik sendiri

Question

Saya membuat permainan teka-teki javascript beberapa tahun yang lalu dan ia berfungsi dengan baik. Baru-baru ini, selepas kemas kini iOS 16.4 dan Safari 16.4, kod itu tidak berfungsi dengan cara yang sama, selepas menyiasat saya menemui masalah itu tetapi saya tidak tahu bagaimana untuk membetulkannya.

Dalam kod saya, saya menetapkan 2 sifat CSS (saiz latar belakang dan kedudukan latar belakang) secara dinamik seperti ini, dan nilai (gridSize, xpos dan ypos) sebelum ini ditetapkan dalam kod:

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

Sekarang memeriksa elemen li pada safari 16.4 menunjukkan ini:

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

Menambah "auto" pada sifat saiz latar belakang dan sifat kedudukan latar belakang hanya mempunyai satu nilai (walaupun saya menetapkan setiap satu daripadanya kepada rentetan dalam kod)

Jadi ia sepatutnya kelihatan seperti ini:

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

Tingkah laku ini hanya berlaku pada ios 16.4 (chrome mudah alih dan safari) dan MacOS Safari 16.4, dan berfungsi dengan sempurna pada semua peranti Android atau PC yang lain dan semua versi iOS atau Safari yang lebih awal.

Sebarang cadangan tentang cara membetulkannya untuk memaksanya berfungsi dengan betul pada Safari 16.4

Sunting 1:

Saya cuba menetapkan kedudukan x dan y secara berasingan seperti ini:

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

Tetapi saya mendapat hasil yang sama dan hanya satu nilai ditunjukkan dalam "Kedudukan Latar Belakang".

Sunting 2:

Saya juga memasukkan nilai secara manual seperti ini:

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

Apabila saya menyemak, ia masih meninggalkan satu nilai dan meninggalkan nilai lain (untuk sesetengah elemen tetapi bukan yang lain):

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

Jadi sekarang saya sedar ia menghilangkan nilai "0%", jadi bagaimana saya memaksanya untuk menyimpannya ;

Answer 1

Selepas bekerja keras, saya menemui penyelesaian yang berkesan: Saya menambah 0.000001 pada nilai xpos 和 ypos jadi jika nilai itu 0 saya akan menghalang Safari daripada menganggapnya sebagai 0 mutlak...dan voila强> ia berfungsi seperti azimat.