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