Safari 16.4 および iOS 16.4 は動的に設定された CSS プロパティを独自に変更します

Question

私は数年前に JavaScript パズル ゲームを作成しましたが、問題なく動作しました。 最近、iOS 16.4 と Safari 16.4 のアップデート後、コードが同じように動作しなくなり、調査した結果、問題が見つかりましたが、修正方法がわかりません。

私のコードでは、次のように 2 つの CSS プロパティ (背景サイズと背景位置) を動的に設定し、(gridSize、xpos、および ypos) の値は事前にコード内で設定されていました。

リーリー

Safari 16.4 で li 要素を検査すると、次のことがわかります:

背景サイズ: 300% 自動; 背景位置: 0%;

背景サイズプロパティと背景位置プロパティに「auto」を追加すると、値は 1 つだけになります (コード内でそれぞれを文字列に設定した場合でも)

したがって、次のようになります:

背景サイズ: 300%; 背景位置: 0% 0%;

この現象は、iOS 16.4 (モバイル Chrome および Safari) および MacOS Safari 16.4 でのみ発生し、他のすべての Android または PC デバイス、およびすべての以前の iOS または Safari バージョンでは完全に動作します。

これを修正して Safari 16.4 で適切に動作するようにする方法に関する提案はありますか?

編集1:

次のように x 位置と y 位置を別々に設定してみました:

リーリー

しかし、同じ結果が得られ、「背景位置」には値が 1 つだけ表示されます。

編集2:

次のように値を手動で入力しました:

リーリー

確認すると、依然として 1 つの値が省略され、別の値が残されています (一部の要素については、他の値は残されていません):

リーリー

それで、「0%」値が省略されていることに気付きました。どうすればそれを強制的に保持するにはどうすればよいですか;

Answer 1

苦労の末、効果的な解決策を見つけました。 xpos と ypos の値に 0.000001 を追加したので、値が 0 の場合、Safari がそれを絶対 0 として扱うのを防ぎます...その後、出来上がり## ＃、それは魅力的に機能します。 强>