содержание iframe приводит к тому, что текст на моей странице становится размытым

Question

У меня есть контейнер iframe на моей странице, который загружает карту, когда я нажимаю на кнопку.И по какой-то причине, когда карта загружается, окружающие объекты становятся размытыми.

Пример: 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 может быть случайно расположен в подпиксельной позиции, то есть слева установлено значение 10%, и это вычисляет, скажем, 10,5 пикселей.Это приводит к тому, что содержимое iframe выглядит размытым.

В моем случае что-то такое же простое, как нечетное значение (35 пикселей) для заполнения элемента-предка, приводящее к нечетному значению ширины, а затем слева: 10% наiframe было достаточно, чтобы вызвать проблему, установив четное число для заполнения, а затем устранив проблему.

Answer 2

Добавление его в качестве ответа, чтобы люди, ищущие аналогичную проблему, нашли его.

Иногда содержимое iframe содержит абсолютно позиционированные элементы внутри, которые из-за позиционирования css могут занимать весь экран, еслиiframe не позиционируется relative для какого-либо контейнера.

Так что, похоже, в этом случае это проблема.

Поэтому попробуйте обернуть iframe в контейнер и установить его position:relative, чтобы исправить.