如何在无抗锯齿的情况下在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;来实现像素化。