如何在没有抗锯齿的 iframe 上使用 transform:scale()？

Question

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

我已经在 iframe 上尝试了以下所有 CSS 规则（相同的任意多种组合），似乎没有一个在 Firefox 的 Chrome 中有效：

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;，即使转换工作正常。我通过在 iframe 内的 HTML/CSS 中添加 image-rendering: pixelated; 来实现像素化。