Safari 16.4 和 iOS 16.4 自行更改动态设置 CSS 属性
P粉099985373
P粉099985373 2024-02-21 15:11:28
[CSS3讨论组]

几年前我制作了一个 javascript 拼图游戏,它运行得很好。 最近,在 iOS 16.4 和 Safari 16.4 更新后,代码无法以相同的方式工作,经过调查后我发现了问题,但我不知道如何修复它。

在我的代码中,我像这样动态设置了 2 个 CSS 属性(背景大小和背景位置),并且之前在代码中设置了(gridSize、xpos 和 ypos)的值:

var li = $('
  • ').css({ 'background-size': (gridSize * 100) + '%', 'background-position': xpos + ' ' + ypos, });

    现在检查 safari 16.4 上的 li 元素显示如下:

    背景大小:300% 自动;背景位置:0%;

    将“auto”添加到背景大小属性和背景位置属性只有一个值(尽管我在代码中将它们中的每一个设置为字符串)

    所以它应该是这样的:

    背景大小:300%;背景位置:0% 0%;

    此行为仅发生在 ios 16.4(移动版 chrome 和 safari)和 MacOS Safari 16.4 上,并且在所有其他 Android 或 PC 设备以及所有早期 iOS 或 Safari 版本中完美运行。

    有关如何解决此问题以强制其在 Safari 16.4 上正常工作的任何建议

    编辑1:

    我尝试像这样分别设置 x 和 y 位置:

    var li = $('
  • .
  • ').css({ 'background-size': (gridSize * 100) + '%', 'background-position-x': xpos, 'background-position-y': ypos, });

    但我得到了相同的结果,并且“背景位置”中仅显示一个值。

    编辑2:

    我什至像这样手动输入值:

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

    当我检查时,它仍然省略一个值并留下另一个值(对于某些元素而不是其他元素):

  • 所以现在我意识到它省略了“0%”值,那么如何强制它保留它;

    P粉099985373
    P粉099985373

    全部回复(1)
    P粉990008428

    经过一番努力,我找到了一个有效的解决方案: 我在 xposypos 的值中添加了 0.000001,因此,如果值为 0,我会阻止 Safari 将其视为绝对 0……然后瞧强>,它就像一个魅力。

    热门教程
    更多>
    最新下载
    更多>
    网站特效
    网站源码
    网站素材
    前端模板
    关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
    php中文网:公益在线php培训,帮助PHP学习者快速成长!
    关注服务号 技术交流群
    PHP中文网订阅号
    每天精选资源文章推送
    PHP中文网APP
    随时随地碎片化学习

    Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号