1120090 - Media queries do not apply to certain window sizes on Windows HiDPI displays

Status: UNCONFIRMED

(Core :: Layout, defect)

Description

[Paweł Gabryelewicz]

Attachment: firefoxbug.png

User Agent: Mozilla/5.0 (Windows NT 6.3; WOW64; rv:36.0) Gecko/20100101 Firefox/36.0
Build ID: 20150109004005

Steps to reproduce:

Setup: 12" 1920x1080px screen with recommended HiDPI settings (DELL E7240), Windows 8.1
During webiste development I realized that while having these two media queries we can enter between them due to subpixel miscalculation probably.

We've got these two media queries used:
- (max-width: 767px)
- (min-width: 768px) and (max-width: 991px)

After entering the Responsive Design View I resized the viewport to 768px Firefox applies styles for the second media query (correct). When I resized to 766px it applies styles for the first media query (also correct). Then I resized to 767px which gave me default styles (non-media-queried).


Actual results:

None of the aforementioned media queries were taken into consideration by Firefox.


Expected results:

It should have used styles from "max-width: 767px" media query.

Comment 1

[:Gijs (he/him)]

Can you confirm that the test I just stuck in the URL field reproduces this for you (is red at 767px width) on your Windows machine? (I can't reproduce on my retina mac, unfortunately)

If not, can you attach a testcase that reproduces the issue for you?

Comment 2

[:Gijs (he/him)]

(In reply to Paweł Gabryelewicz from comment #0)
> Created attachment 8547055 [details]
> firefoxbug.png
> 
> User Agent: Mozilla/5.0 (Windows NT 6.3; WOW64; rv:36.0) Gecko/20100101
> Firefox/36.0
> Build ID: 20150109004005
> 
> Steps to reproduce:
> 
> Setup: 12" 1920x1080px screen with recommended HiDPI settings (DELL E7240),
> Windows 8.1

Also, can you clarify what these recommended settings boil down to? In particular, what is your text size under http://windows.microsoft.com/en-US/windows-8/make-text-screen-larger-smaller/?v=t ?

Comment 3

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Did a media query of (width: 767.5px) apply?

If you have two screen pixels per CSS pixel (which is common for HiDPI), then that would be a reasonable value in CSS pixels.

Comment 4

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

(And if so, maybe the underlying problem is that the devtools UI isn't showing the fractional pixels?)

Comment 5

[Paweł Gabryelewicz]

(In reply to :Gijs Kruitbosch from comment #1)
> Can you confirm that the test I just stuck in the URL field reproduces this
> for you (is red at 767px width) on your Windows machine? (I can't reproduce
> on my retina mac, unfortunately)
> 
> If not, can you attach a testcase that reproduces the issue for you?

Yes, it is red on 767px only. In any other cases it is green. I've created also my own test file which is available here:
http://dev.considonet.com/ffhidpi/test1.html
There is also another boundary-scenario - 767.5px max-width which Gecko applies to 767px on my screen.

Comment 6

[Paweł Gabryelewicz]

(In reply to :Gijs Kruitbosch from comment #2)
> (In reply to Paweł Gabryelewicz from comment #0)
> > Created attachment 8547055 [details]
> > firefoxbug.png
> > 
> > User Agent: Mozilla/5.0 (Windows NT 6.3; WOW64; rv:36.0) Gecko/20100101
> > Firefox/36.0
> > Build ID: 20150109004005
> > 
> > Steps to reproduce:
> > 
> > Setup: 12" 1920x1080px screen with recommended HiDPI settings (DELL E7240),
> > Windows 8.1
> 
> Also, can you clarify what these recommended settings boil down to? In
> particular, what is your text size under
> http://windows.microsoft.com/en-US/windows-8/make-text-screen-larger-smaller/
> ?v=t ?

My window looks a little bit different than in the article - here's the screenshot:
http://dev.considonet.com/ffhidpi/textsize.png

I am probably using 125% (medium) but no percentage values are presented there - this is probably due to other OS version or Dell's OEM customization (I am using original Dell OEM Windows 8).