Safari 16.4 and iOS 16.4 change dynamically set CSS properties on their own

Question

I made a javascript puzzle game a few years ago and it worked just fine. Recently, after iOS 16.4 and Safari 16.4 updates, the code is not working the same way, after investigating I found the problem but I don't know how to fix it.

In my code, I set 2 CSS properties (background size and background position) dynamically like this, and the values ​​of (gridSize, xpos and ypos) were previously set in the code:

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

Now inspecting the li element on Safari 16.4 shows the following:

Background size: 300% automatic; Background position: 0%;

Adding "auto" to the background size property and the background position property only have one value (even though I set each of them to strings in code)

So it should be like this:

Background size: 300%; Background position: 0% 0%;

This behavior only occurs on ios 16.4 (mobile chrome and safari) and MacOS Safari 16.4, and works perfectly on all other Android or PC devices and all earlier iOS or Safari versions.

Any suggestions on how to fix this to force it to work properly on Safari 16.4

Edit 1:

I tried setting the x and y positions separately like this:

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

But I get the same result and only one value is shown in "Background Position".

Edit 2:

I even entered the values ​​manually like this:

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

When I check, it still omits one value and leaves another (for some elements but not others):

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

So now I realize it is omitting the "0%" value, so how do I force it to keep it;

Answer 1

After some hard work, I found an effective solution: I added 0.000001 to the value of xpos and ypos, so if the value is 0 I prevent Safari from treating it as an absolute 0...and then voila强>, it works like a charm.