Currently @media (any-pointer: coarse) {} is false wh

You can test with this example : <div class="snippet-clipboard-content notranslate

I made a minimum repro and filed an upstream bug in chrome: <a href="https://issue

Mobile test should also emulate having a `coarse` pointer device. about lighthouse HOT 6 CLOSED

romainmenke commented on May 22, 2024 1

Mobile test should also emulate having a `coarse` pointer device.

from lighthouse.

Comments (6)

adamraine commented on May 22, 2024 1

Ah I see. I can reproduce using Lighthouse in DevTools but I'm not seeing the issue with Lighthouse CLI

from lighthouse.

romainmenke commented on May 22, 2024 1

Thank you for taking the time to make the repro and filing the upstream bug 🙇

It's fine to close this, I can track the upstream issue :)

from lighthouse.

adamraine commented on May 22, 2024

During a Lighthouse run with mobile emulation enabled, I am seeing window.matchMedia('(any-pointer: coarse)').matches return true. Can you provide an example page where you are seeing the media query styles not being applied?

from lighthouse.

romainmenke commented on May 22, 2024

You can test with this example :

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>

	<style>
		a {
			display: block;
			margin: 0;
			padding: 0;
		}

		@media (any-pointer: coarse) {
			body {
				background-color: green;
			}
		}

		@media (any-pointer: coarse) {
			a {
				margin: 50px;
			}
		}

		/* @media (width <= 600px) {
			a {
				margin: 50px;
			}
		} */
	</style>
</head>
<body>
	<a href="#1">One</a>
	<a href="#2">Two</a>
</body>
</html>

I expect to see a green background and a lot of white space around each anchor.

Instead I see a white background and no white space.

I also see this notice: