Question

这个问题，有一点不同于“css scale chrome”等问题。 iframe移动到特定位置后，文本将正确显示。并且，当移动到再次出现问题的位置时，文本将变得模糊。

移动将执行jquery的位置。

为什么移动iframe，文字会正确显示？

屏幕截图。 http://ggamagidev.blogspot.com/2013/12/blurry-text-with-css-scaled-iframe-in.html

它已应用于iframe，但失败了。

// transform: "translateZ(0)",
// "-webkit-transform": "translateZ(0)",
// "-webkit-text-stroke": "0.35px",
// "transform-style": "preserve-3d",
// "-webkit-transform-style": "preserve-3d",
// "transform-style": "flat",
// "-webkit-transform-style": "flat",
// "font-smooth":"never",
// "-webkit-perspective":1000,
// "backface-visibility": "hidden",
// "-webkit-backface-visibility":"hidden",

Answer 1

尝试使用chrome中的字体模糊。

body {-webkit-text-stroke: 0px!important;-webkit-font-smoothing: antialiased !important;}

Answer 2

将z-index的所有父容器的auto设置为iframe可以解决模糊问题，尽管从一开始它就与transform缩放有关。要点是排除具有相同z索引的元素的交集（在iframe和缩放变换的情况下，它们会引起令人讨厌的模糊效果）

{z-index: auto;}

Chrome中使用css缩放iframe的模糊文本

2 个答案: