Safari 16.1版本图片出现异常阴影问题求助

这是Safari 16.1版本的一个已知渲染bug，当图片应用了max-width这类缩放样式时，容易出现莫名的异常阴影。结合你用的Tailwind CSS，给你几个实测有效的解决办法：

• 触发硬件加速规避bug
  给图片添加transform: translateZ(0)样式，对应Tailwind的工具类是transform translate-z-0，修改后的代码：

  <img src="gitHub.png" alt="github" class="max-w-[130px] transform translate-z-0">
  

• 调整图片渲染优化参数
  给图片添加-webkit-optimize-contrast的图片渲染属性。你可以先在Tailwind里自定义一个工具类：
  在tailwind.config.js中扩展主题：

  module.exports = {
    theme: {
      extend: {
        imageRendering: {
          'optimize-contrast': '-webkit-optimize-contrast',
        },
      },
    },
    plugins: [],
  }
  

  然后给图片添加这个自定义类：

  <img src="gitHub.png" alt="github" class="max-w-[130px] image-rendering-optimize-contrast">
  

• 快速修复：添加零边框
  给图片加上border-0类，有时候能绕开Safari的边框计算bug：

  <img src="gitHub.png" alt="github" class="max-w-[130px] border-0">
  

这些方法都是通过改变Safari的图片渲染路径来规避这个版本特定的bug，选其中一个就能解决问题。

内容的提问来源于stack exchange，提问作者dardar.moh