Pointer media query not respected
Categories
(Firefox for Android :: Browser Engine, defect)
Tracking
()
People
(Reporter: lilly, Unassigned, NeedInfo)
Details
Attachments
(1 file)
|
283.58 KB,
image/png
|
Details |
Screenshot 2024-06-26 at 14.59.37.png
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:127.0) Gecko/20100101 Firefox/127.0
Steps to reproduce:
Using the following HTML snippet:
<!DOCTYPE html>
<html>
<head>
<style>
@media (pointer:fine){
p {
background-color: red;;
}
}
@media (pointer: coarse){
p {
background-color: blue;
}
}
</style>
</head>
<body>
<p>Hello world</p>
</body>
</html>
I would expect a normal desktop to display a red background, and a normal Android device to display a blue one. This is following the compatibility chart on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pointer
Actual results:
Firefox on Desktop displays it in Red as expected
Google Chrome on Android displays Blue as expected
Firefox on Android displays Blue
Expected results:
Firefox on Android should display Red
The example at https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pointer does not work either.
The checkbox still has a blue background when it should be red
|
||
Comment 2•2 years ago
|
||
Hey Lilly, I wasn't able to reproduce this issue on my device. Both your example and MDN used the appropriate coarse colors in Fenix. Do you happen to have any extensions or modified about:config values? If you do a fresh install of another variant (Nightly, Beta or Release) can you reproduce the issue?
|
|
||
Comment 3•1 year ago
|
||
Going to close this as works for me. Please re-open if you're still able to reproduce!
Description
•