我的页面上有一个 iframe 容器，当我单击按钮时会加载地图。并且由于某种原因，当地图加载时，它会导致周围的物体变得模糊。
示例： https://i.postimg.cc/xCfJWwZG/beforeafter.png
我尝试将 -webkit-font-smoothing: subpixel-antialiased; 添加到 CSS 中的各种内容和 transform: scale(1.0) translate3d(0,0,0); 中，这只会使对象永久模糊。如何阻止 iframe 搞砸我的页面。
【问题讨论】：
position 设置为relative？
将其添加为答案，以便寻找类似问题的人找到它。
有时iframe 的内容在内部具有绝对定位的元素，如果iframe 未将relative 定位到某个容器，则由于css 定位可能会占据整个屏幕。
所以在这种情况下，这似乎是问题所在。
所以尝试将iframe 包装在一个容器中并设置它的position:relative 来修复它。
【讨论】：
position:relative 的 div 中没有帮助?
问题很可能不是由 position:absolute css 属性直接引起的，而是由 iframe 的子像素定位引起的抗锯齿引起的。
无论是使用 % 值定位还是使用具有 % 值的变换，iframe 都可能无意中定位在子像素位置，即左侧设置为 10%，计算结果为 10.5 像素。这会导致 iframe 内容显得模糊。
在我的情况下，像在祖先元素上填充奇数值 (35px) 这样简单的东西会导致宽度的奇数值，然后 iframe 上的 left:10% 足以导致问题，将填充设置为偶数则消除了问题。
【讨论】：