Максимальный размер медиа-запроса 767 пикселей - стили отрисовываются только с разрешением 766 пикселей или ниже (только для Firefox)

Question

Я наполовину решил эту проблему, но без полного понимания проблемы, которая беспокоит меня. Интересно, может ли кто-нибудь помочь мне понять, что в игре?

У меня есть iframe, установленный на 100% ширины с помощью CSS. Размер контейнера 767px. И поэтому так же iframe.

У меня есть следующий медиа-запрос в таблице стилей iframe:

@media (max-width: 767px) {
    body {
        background: red;
    }
}

Во всех популярных браузерах, протестированных, кроме Firefox, медиа-запрос вступает в силу и устанавливает красный фон тела. В Firefox медиазапрос вступает в силу только тогда, когда для iframe установлено значение 766px - на 1px меньше, даже если max-width должно быть "до и включая". Это похоже на ошибку. Мой обходной путь сейчас состоит в том, чтобы установить ширину iframe в 766.7px (вычесть.3 пикселя). Это похоже на работу в Firefox (вычитание 0.2 не сработало).

Мой вопрос - что здесь происходит? Может ли это быть ошибкой в ​​Firefox? Я знаю, что моя реализация iframe немного нерегулярна, но я думаю, что основная причина может быть связана с этим вопросом, который вдохновил мое решение: медиа-запрос теряется в Firefox при изменении размера окна до максимальной ширины минус ширина полосы прокрутки

Answer 1

Я испытал ту же проблему. У меня не установлен Zoom в моем браузере, но у меня есть монитор 2K и я использую настраиваемое масштабирование дисплея, предоставляемое ОС Windows 10, что, по моему мнению, вызывает странное поведение как в FF, так и в Chrome.

Чтобы исправить это, попробуйте установить layout.css.devPixelsPerPx равным 1,0 (по умолчанию -1) на странице about:config, чтобы увидеть, имеет ли это эффект.

При необходимости вы можете изменить его значение с шагом 0,1 или 0,05 (1,1 или 0,9), пока значки или текст не будут выглядеть правильно.

Answer 2

FWIW, идентичное поведение в Chrome было связано с тем, что настройка масштабирования браузера на вкладке была установлена ​​на 125% вместо 100%

Я полагаю, что это отбросило расчет iframe, имитирующего телефон, в пределах которого должен был быть порог в 767 пикселей.

Я потратил целый час на то, чтобы разобраться во всех источниках против старого развертывания, прежде чем заметил>_>