Closed Bug 1124731 Opened 10 years ago Closed 5 years ago

RDM media queries are incorrectly affected by full page zoom

Categories

(Core :: CSS Parsing and Computation, defect)

Product:
Core
Component:
CSS Parsing and Computation
Version:
37 Branch
Platform:
x86
macOS
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

()

Status:
RESOLVED DUPLICATE of bug 1575097

People

(Reporter: daniel.john.oconnell, Assigned: bradwerth)

References

Details

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.10; rv:37.0) Gecko/20100101 Firefox/37.0 Build ID: 20150121004011 Steps to reproduce: I am using the responsive design view to test a website. I have a media query (max-width: 680px) that is not kicking in until what responsive design view is saying is 609px. This code works fine in Chrome and comparing the two windows by eye shows that the Firefox view is too wide. Actual results: My media query did not show anything at what was supposedly 680px wide but does work at 609px Expected results: The media query should have effect where the responsive design view says that the viewport is 680px wide
Could you attach a minimal testcase (or URL), please?
Component: Untriaged → Developer Tools: Responsive Mode
Flags: needinfo?(daniel.john.oconnell)
Summary: The pixel width in responsive design view in Firefox Developer Edition is out by around 70 pixels → The pixel width in responsive design view is out by around 70 pixels
I have been noticing a similar issue, I think the resize event is triggering too late, or is not even triggering.
FWIW it's working fine for me with the following test case: data:text/html,<!DOCTYPE html><style>@media (max-width: 680px){body{background:red}}</style> I.e. the background color switches to red when the width is smaller than 680 pixels. I tested that on FF 35.0.1/38.0a1 (2015-01-29) + Win7. Sebastian
I just had pretty much the same issue on Dev Edition 50.0a2 (2016-08-09)- just with slightly different numbers. It was off by 60px for me. When I ran Sebastian's test case on a current beta 49.0b1 and compared with a test on the Dev Edition I saw that the Dev Edition was zoomed in - which caused the discrepancy. Daniel, have you encountered this issue again, or could it have been the same reason as mine above? (As this bug is already 1.5 years old and it seems to be Daniel's first reported bug - not sure if he is still around.)
Flags: needinfo?(daniel.john.oconnell)
Sorry for the spam, meant to add NI instead of removing it Might it be worth it to add some notification to the RDV if the zoom level is not 1?
Flags: needinfo?(daniel.john.oconnell)
> Daniel, have you encountered this issue again, or could it have been the same reason as mine above? As Daniel didn't answer the ni request before, it's unlikely he'll answer it now. Though, as he mentions 609 pixels as threshold, I am pretty sure he must have zoomed out once, because I can see this behavior on Nightly (2016-08-09). Therefore I remove the need-info for him now. Daniel, a confirmation whether that's the same what you were observing would still be welcome, though. Here the precise steps: 1. Load data:text/html,<!DOCTYPE html><style>@media (max-width: 680px){body{background:red}}</style> 2. Enable the Responsive Design View (e.g. by pressing Ctrl+Shift+M) 3. Zoom out once (e.g. by pressing Ctrl+-) 4. Resize the viewport to 609 pixels => Background stays white. 5. Resize the viewport to 608 pixels => Background turns red. So, the zoom level is obviously not taken into account for the viewport measurement field. Related issues: bug 1278758 and bug 1058558 Sebastian
Flags: needinfo?(daniel.john.oconnell)
See Also: → 1278758, 1058558
Product: Firefox → DevTools
Cameron, this appears to be a styling issue with the application of media queries during browser zoom. Though it is reproducible in Devtools, the fix will likely be in the Platform, so I'm proposing you triage/assign it.
Component: Responsive Design Mode → CSS Parsing and Computation
Flags: needinfo?(cam)
Product: DevTools → Core
How does DRM set up / measure the viewport? We're literally just using the CSS viewport that, e.g., viewport units use: https://searchfox.org/mozilla-central/rev/80ac71c1c54af788b32e851192dfd2de2ec18e18/servo/components/style/gecko/media_features.rs#19 So I'd be fairly surprised if this is a platform bug. Could someone post a test-case that doesn't involve RDM?
I'll take the bug and figure out the root cause, then characterize it correctly after-the-fact.
Assignee: nobody → bwerth
Flags: needinfo?(cam)
Status: UNCONFIRMED → ASSIGNED
Ever confirmed: true
Status: ASSIGNED → RESOLVED
Closed: 5 years ago
Resolution: --- → DUPLICATE
Summary: The pixel width in responsive design view is out by around 70 pixels → RDM media queries are incorrectly affected by full page zoom
You need to log in before you can comment on or make changes to this bug.