max-width 767px media query - styles only render at 766px or below (only firefox affected)

Question

I've half solved this issue, but without fully understanding the problem, which worries me. I wonder if someone can help me understand what is at play?

I have an iframe set to 100% width via CSS. The container div is 767px. And therefore so is the iframe.

I have the following media query in the iframe's stylesheet:

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

In all popular browsers tested other than Firefox, the media query takes effect and sets the body background to red. In Firefox, the media query only takes effect when the iframe is set to 766px - 1px less even though max-width should be 'up to and including'. This seems like a bug. My workaround for now is to set the iframe width to 766.7px (subtract .3 pixels). This seems to work in Firefox (subtracting 0.2 didn't work).

My question - what is going on here? Could this actually be a bug in Firefox? I know my iframe implementation is a little irregular, but I think the root cause may relate to this question which inspired my solution: Media query lost in Firefox when window resized to max-width minus scrollbar width

Answer 1

I experienced the same issue. I don't have Zoom set in my browser, but I do have a 2K Monitor and use the Display custom scaling provided by the Windows 10 OS, which I believe is causing the weird behavior in both FF and Chrome.

To fix, try to set layout.css.devPixelsPerPx to 1.0 (default is -1) on the about:config page to see if that has effect.

If necessary you can adjust its value in 0.1 or 0.05 steps (1.1 or 0.9) until icons or text look right.

Answer 2

FWIW, identical behavior on Chrome was due to... the tab's browser zoom setting being set to 125% instead of 100%

I believe this threw off the calculation of a phone-simulating iframe within which should have been under the threshold at 767px.

I spent an hour diffing all the sources against an older deployment before noticing >_>