inconsistent media query behavior

RESOLVED DUPLICATE of bug 1203753

Status

()

Core
Layout
RESOLVED DUPLICATE of bug 1203753
3 years ago
2 years ago

People

(Reporter: bramt, Unassigned, NeedInfo)

Tracking

39 Branch
x86_64
Windows 7
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(2 attachments)

(Reporter)

Description

3 years ago
Created attachment 8638506 [details]
Sample to reproduce the problem

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:39.0) Gecko/20100101 Firefox/39.0
Build ID: 20150630154324

Steps to reproduce:

Open the attached reduced sample file.
Resize the window a few times very slowly back and forth over the width where the displayed content changes (500px)


Actual results:

At a certain screen size (just one pixel) both texts are visible.


Expected results:

Only one of the paragraphs should be visible at all times.

Note: it works like expected on the same version of firefox but on different hardware (no idea what the trigger is though). It also works like expected in other browsers.

Comment 1

2 years ago
Build ID: 20151206030448
User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:45.0) Gecko/20100101 Firefox/45.0

Hi, 

I have tested this on Win 7 with Firefox Nightly 45.0a1 and I can't reproduce this issue. I see only one paragraph all the time. 
Please install Nightly from here: https://nightly.mozilla.org/ and retest the problem. 
Thank you
Flags: needinfo?(bramt)
(Reporter)

Comment 2

2 years ago
The same build (standard 32-bit) can reproduce the issue on my machine.
Is there any more information about my system setup that might be relevant?
Flags: needinfo?(ovidiu.boca)

Comment 3

2 years ago
Hi, 

Thank you for your time, did you tested with Nightly version?
Also I will kindly ask you to try some things, you have the steps bellow. 

Create a new profile, you have the steps here:https://support.mozilla.org/en-US/kb/profile-manager-create-and-remove-firefox-profiles?redirectlocale=en-US&redirectslug=Managing-profiles#w_starting-the-profile-manager

Please test if the issue can be reproduced in the safe mode of Firefox: https://support.mozilla.org/en-US/kb/troubleshoot-firefox-issues-using-safe-mode

Please tell me if you still have the problem?
And thank you again for your time.
Flags: needinfo?(ovidiu.boca)
(Reporter)

Comment 4

2 years ago
Yes, I used the download from the link you provided.
(About screen says the version is 45.0a1 (2015-12-07))

I tried creating a new profile and running in safe mode.
The problem is still reproducible.

Are there any other things I can try or information that would be useful?
Flags: needinfo?(bramt)
(Reporter)

Updated

2 years ago
Flags: needinfo?(ovidiu.boca)

Comment 5

2 years ago
Hi,
Please tell me one more time the steps that you are following to reproduce this issue, maybe I miss something. 
Thank you
Flags: needinfo?(ovidiu.boca) → needinfo?(bramt)

Comment 6

2 years ago
Hi,
Please use this to record your screen:  http://screencast-o-matic.com/home      and attach the link.  
Thank you.
(Reporter)

Comment 7

2 years ago
For some reason I'm not receiving the registration email to be able to upload the video.
I attached the saved video file instead.
(Reporter)

Comment 8

2 years ago
Created attachment 8696612 [details]
Video demonstrating how to reproduce the issue
Flags: needinfo?(bramt)

Comment 9

2 years ago
User Agent Mozilla/5.0 (Windows NT 6.1; WOW64; rv:45.0) Gecko/20100101 Firefox/45.0
Build ID 20151207030210

Hi,

Thank you for your video, I try to reproduce this issue on 2 computers but I can't, you have this problem with other browsers? Please make the upload of Nightly to (2015-12-07), if you have an older version. I have ATI Radeon 3000 Graphics, what is yours? Maybe this have something to do with graphic card.
(Reporter)

Comment 10

2 years ago
I'm using the nightly of 2015-12-07 in the video.

The problem is not reproducible on chrome.
Internet explorer shows both paragraphs all of the time but this is most likely an issue with the inline style and media queries of the sample

My hardware is a dell laptop lattitude E6540 (graphics card is and Intel HD Graphics 4600).
In my work setup I use 3 screens (the one from the laptop and two extras) and the problem is reproducible on all 3 screens.

Updated

2 years ago
Component: Untriaged → Layout
OS: Unspecified → Windows 7
Product: Firefox → Core
Hardware: Unspecified → x86_64
Both texts will be visible if the width of the window is greater than 500px but less than 501px.  Note that Chrome has a known bug with this that they only fixed a few days ago: https://code.google.com/p/chromium/issues/detail?id=560874

When both texts are visible, what do you see if you run this in the console:

  document.documentElement.getBoundingClientRect().width

?
Oh, and are you by any chance either running with zoom set to something other than 100% or on a high-dpi screen?  Either one makes it easy to have window widths that are not an integer number of CSS pixels.
Flags: needinfo?(bramt)
Or with a Windows setting to use a DPI other than 96, I guess; that would also allow non-integer window widths.
(Reporter)

Comment 14

2 years ago
The width of the bounding rect is 500.79998779296875 when both texts are visible.
The problem is reproducible with a zoom factor of 100%.
My screen resolution (on the main screen of my laptop) is 1920x1080.
Flags: needinfo?(bramt)
> The width of the bounding rect is 500.79998779296875 when both texts are visible.

OK, so they should both be visible: the viewport width is larger than than 500 and smaller than 501.

> My screen resolution (on the main screen of my laptop) is 1920x1080.

That's not the important bit.  The important bit is what the value of window.devicePixelRatio is.  Given that width, I somewhat expect that in your case it's 1.25 and Windows is running at 120 DPI, not 96.  Is that the case?
Flags: needinfo?(bramt)
(Reporter)

Comment 16

2 years ago
The value for window.devicePixelRatio is 1.25.

What do you mean with they should both be visible?
I was under the impression that as far as media queries are concerned, there shouldn't be anything in between two pixels?
> What do you mean with they should both be visible?

Your viewport width is 500.8px.  That means neither media query applies.

> I was under the impression that as far as media queries are concerned, there shouldn't be
> anything in between two pixels?

That impression is incorrect, sorry.  And yes, this is annoying given the lack of ability to do ranges that don't include the endpoint.

What you can do is use "max-width: 500px" and "min-width: 500.01px" or "max-width: 499.99px" and "min-width: 500px" (depending on which one you want an actual 500px width to fall into).

At least until the things mentioned in bug 1203753 comment 6 are implemented in all browsers.
Status: UNCONFIRMED → RESOLVED
Last Resolved: 2 years ago
Resolution: --- → DUPLICATE
Duplicate of bug: 1203753
You need to log in before you can comment on or make changes to this bug.