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