iPhone端CSS image-rendering:pixelated失效问题及解决办法

问题描述 #

将放大后的像素画设为页面背景时，iPhone端显示模糊，即便加了image-rendering: pixelated;也没用。但设置background-size: cover或contain时，像素风格能正常保留，可我需要的是按精确像素值放大并重复的背景，以此维持比例（桌面端显示正常，iPhone端模糊）。

问题成因 #

• iOS Safari对image-rendering: pixelated的支持有特殊限制：当背景用**固定像素值的background-size**时，Safari会默认做平滑缩放，直接忽略pixelated属性；而cover/contain属于相对尺寸缩放，浏览器才会触发像素化渲染逻辑。
• 本质是Safari渲染引擎处理固定尺寸背景图时，优先进行亚像素对齐的平滑处理，不遵循像素化渲染规则。

解决办法 #

方法1：结合设备像素比计算精确尺寸 #

用window.devicePixelRatio获取设备像素比，动态计算背景尺寸，确保缩放倍数是整数，同时加Safari兼容的渲染属性：

body {
  --dpr: 1;
  background-image: url('你的像素图地址');
  background-repeat: repeat;
  /* 假设原图是64x32，放大4倍后乘以设备像素比 */
  background-size: calc(64px * 4 * var(--dpr)) calc(32px * 4 * var(--dpr));
  image-rendering: -webkit-optimize-contrast; /* Safari兼容 */
  image-rendering: pixelated;
}

搭配JS动态设置DPR：

document.documentElement.style.setProperty('--dpr', window.devicePixelRatio);

方法2：用Canvas手动绘制放大图 #

通过Canvas按整数倍放大像素画，再转成图片URL当背景，彻底绕开浏览器自动缩放：

const img = new Image();
img.src = '你的像素图地址';
img.onload = function() {
  const scale = 4; // 自定义放大倍数
  const canvas = document.createElement('canvas');
  canvas.width = img.width * scale;
  canvas.height = img.height * scale;
  const ctx = canvas.getContext('2d');
  ctx.imageSmoothingEnabled = false; // 关闭平滑渲染
  ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
  document.body.style.backgroundImage = `url(${canvas.toDataURL()})`;
  document.body.style.backgroundSize = `${canvas.width}px ${canvas.height}px`;
  document.body.style.backgroundRepeat = 'repeat';
};

方法3：提前导出放大后的像素图 #

用设计工具（比如Aseprite、PS）把像素图按需要的倍数放大，导出时关闭平滑选项，直接用放大后的图当背景，不用CSS缩放：

body {
  background-image: url('放大后的像素图.png');
  background-repeat: repeat;
  background-size: auto;
}

Android端情况 #

Android主流浏览器（Chrome、Edge等）对image-rendering: pixelated支持很完善，用固定像素值background-size时不会出现模糊问题，只有iOS Safari有这个特殊渲染逻辑。

原示例代码 #

CSS

* {
  image-rendering: pixelated;
}

body {
  background-image: url('https://i.sstatic.net/FqpwS.gif');
  background-repeat: repeat;
  background-size: 256px 128px;
}

#test {
  outline: 1px red solid;
  background-image: url('https://i.sstatic.net/FqpwS.gif');
  background-size: cover;
  width: 100%;
  height: 100px;
}

HTML

<body>
  <div id="test"></div>
</body>

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