Safari 16.1中jQuery修改图片类后样式不生效问题求助

问题分析 #

你用jQuery切换图片的CSS类，升级Safari到16.1后，类确实已经修改，但新类对应的filter样式却没有生效。这是Safari 16.1的一个渲染bug：当动态切换元素的filter属性时，浏览器没有正确触发元素重绘，导致新样式无法应用。

解决方法 #

切换类之后，强制触发浏览器重绘即可。最简单的方式是读取元素的offsetWidth属性（这是一个轻量的触发重绘操作）。

修改后的完整代码示例 #

JavaScript

$( "#change-it" ).on( "click", function () {
    const img = $( "#change-me" );
    img.removeClass( "image-fx-moon" ).addClass( "image-fx-rise" );
    // 强制触发浏览器重绘
    void img[0].offsetWidth;
});

CSS

.image-fx-moon {
  filter: grayscale(0.99) contrast(1.1) brightness(1.1);
}

.image-fx-rise {
  filter: saturate(0.75) contrast(0.85) brightness(1.1);
}

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img id="change-me" class="image-fx-moon" src="https://www.isorauschen.at/gallery/articles/main/amazingplacesv_311224_1.jpg" width=400 height=auto />

<button id="change-it" type="button">
  Change
</button>

其他可选方案 #

• 用原生JS操作类（本质仍需触发重绘）：

  document.getElementById('change-it').addEventListener('click', function() {
    const img = document.getElementById('change-me');
    img.classList.remove('image-fx-moon');
    img.classList.add('image-fx-rise');
    void img.offsetWidth;
  });
  

• 临时切换display属性触发重绘（相对重一点，但同样有效）：

  img.css('display', 'none');
  img.css('display', 'block');
  

内容的提问来源于stack exchange，提问作者Alexander Galler