html - iframe 内容导致我页面上的文本变得模糊

Question

我的页面上有一个 iframe 容器，当我单击按钮时它会加载 map 。出于某种原因，本地图加载时，它会导致周围的物体变得模糊。

示例: https://i.postimg.cc/xCfJWwZG/beforeafter.png

我尝试将 -webkit-font-smoothing: subpixel-antialiased; 添加到 CSS 和 transform: scale(1.0) translate3d(0,0,0) 中的各种内容中 这只会使对象永久模糊。如何阻止 iframe 搞砸我的页面。

Answer 1

问题很可能不是由 position:absolute css 属性直接引起的，而是由 iframe 的子像素定位引起的抗锯齿引起的。

无论是使用 % 值定位还是使用带有 % 值的转换，iframe 都可能会无意中定位在子像素位置，即 left 设置为 10%，计算结果为 10.5px。这会导致 iframe 内容显得模糊。

在我的例子中，一些简单的事情就像一个奇数值 (35px) 用于在祖先元素上填充导致宽度的奇数值然后 left:10% 在 iframe 上足以引起问题，将填充设置为一个偶数然后解决了这个问题。