Open Bug 1645208 Opened 5 years ago Updated 3 years ago

@media (hover: hover) breaks after going in and out of responsive design mode (Ctrl+Shift+M)

Categories

(DevTools :: Responsive Design Mode, defect, P3)

78 Branch
defect

Tracking

(Not tracked)

UNCONFIRMED

People

(Reporter: uyeolmakicin, Unassigned)

Details

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:78.0) Gecko/20100101 Firefox/78.0

Steps to reproduce:

  1. Open any website
  2. Go into responsive design mode (ctrl+shift+m)
  3. Drag the page up/down a little bit
  4. Get out of responsive design mode (ctrl+shift+m)
  5. Open console and try running this JavaScript code (easy way to test a media query): matchMedia('(hover: hover)').matches;

Actual results:

The code returns false.

Also it returns false not only for the current tab but for the whole browser (even incognito).

Expected results:

The code should return true.

And as long as we're not in responsive design mode in that certain tab, the code should return true no matter the other tabs.

Bugbug thinks this bug should belong to this component, but please revert this change in case of error.

Component: Untriaged → Responsive Design Mode
Product: Firefox → DevTools

Thanks for filing. I'm not able to reproduce this using the Steps to Reproduce on any sites I've checked (youtube, ebay, amazon). I'm testing in Nightly (Firefox 79) so it's possible that this issue has been resolved by recent fixes we've made to RDM. Would you please re-test in Nightly and see if the problem is still happening? If so, is there more detail you can provide in the Steps to Reproduce?

Flags: needinfo?(uyeolmakicin)
Severity: -- → S3
Priority: -- → P3

Yes I can reproduce in Nightly too. And something interesting happened:

  1. I already had the Developer Edition open. Before installing the Nightly, I've tried the same steps to see if the bug is still there. It is.
  2. Without closing the Developer Edition I've installed the Nightly. Opened it and before applying the repro steps for the bug, I ran the matchMedia code. It returned false! So the Developer Edition affected even the Nightly. (This is the interesting one)
  3. I closed Developer Edition. Nightly returned the correct value (true) for the same code this time.
  4. I've restarted Nightly to make sure Dev edition doesn't interfere. Developer Edition is already closed at this point.
  5. I've tried the original steps in Nightly and the bug is there.

One more thing I've noticed is, when you're in RDM make sure to select something beside the "Responsive" on the dropdown. Pick iphone or ipad etc. so that the matchMedia('(hover: hover)').matches; code should return false during RDM (before the step 3 in my original steps).

Flags: needinfo?(uyeolmakicin)
You need to log in before you can comment on or make changes to this bug.