Safari 16.4 and iOS 16.4 change dynamically set CSS property by it self

i made a javascript jigsaw game a couple of years ago and it was working perfectly.
recently after iOS 16.4 and Safari 16.4 update the code just doesn't work in the same way and after investigating I found the problem but I don't know how to fix it.

in my Code i set the 2 CSS properties (background-size & background-position) dynamically like this with the values of (gridSize,xpos and ypos) are set before 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 is showing this:

background-size: 300% auto; background-position: 0%;

with 'auto' added to background-size property & background-position property has only one value (despite the fact that i set each one of them in the code as a string)

so it is supposed to be like this:

background-size: 300%; background-position: 0% 0%;

this behavior happens only on ios 16.4 (both mobile chrome and safari) & MacOS Safari 16.4 and working perfectly as it should in all other android or PC devices and also all earlier iOS or Safari versions.

any advice how to solve this to force it to work correctly on Safari 16.4

Edit 1:

I tried setting x & 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 got the same results and only one value is shown in "background-position".

Edit 2:

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

and it still omits one value and leaves the other (for some elements and not the others) like this when i inspect :

<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 omits the "0%" value , so how to force it to keep it;

After a lot of struggling through this, I found a solution that works:
I added 0.000001 to the values of xpos and ypos so, in case of a 0 value, I prevent Safari from seeing it as absolute 0 … and voila, it worked like a charm.