html - 如何使用变换:scale() on an iframe without antialiasing?

Question

是否可以防止浏览器对应用了缩放变换的 iframe 元素进行抗锯齿处理？我希望它保持像素化而不是让渲染器尝试在调整大小时平滑像素(我想要“最近的邻居”而不是“双三次”重采样)。

我已经在 iframe 上尝试了以下所有 CSS 规则(相同规则的任意组合)，但在 Chrome 或 Firefox 中似乎都不起作用:

transform: scale(2);
image-rendering: pixelated;
image-rendering: -webkit-optimize-contrast;
image-rendering: -moz-crisp-edges;
image-rendering: crisp-edges;   

transform: perspective(1px) scale(2);
backface-visibility: hidden;

transform: translateZ(1px) scale(2);
backface-visibility: hidden;

Answer 1

我在发布这个问题之前找到了解决方案:即使转换工作正常，iframe 内容也会忽略来自父页面的 image-rendering: pixelated;。我通过将 image-rendering: pixelated; 添加到 iframe 内的 HTML/CSS 来实现像素化。