search

GoogleChrome / lighthouse

Automated auditing, performance metrics, and best practices for the web.
https://developer.chrome.com/docs/lighthouse/overview/
Apache License 2.0
28.03k stars 9.32k forks source link

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

Closed romainmenke closed 3 months ago

romainmenke commented 3 months ago

Currently @media (any-pointer: coarse) {} is false when running a mobile test in Lighthouse.

This affects the scoring for things like tap target checks.

see : https://web.dev/articles/accessible-tap-targets

As noted in the article is best to ensure appropriate tab targets when the pointer device is possibly coarse.

Instead of simply testing for viewport dimensions, and then guessing that small dimensions are likely to be phones or tablets, which in turn use a touchscreen, there are now more robust ways to adapt your design based on actual device capabilities.

However when using that approach we still fail the lighthouse test because the styles behind such a media query are never applied during the test.

This contrasts with manually setting a mobile device in dev tools:

Screenshot 2024-03-25 at 18 27 20
adamraine commented 3 months ago

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?

romainmenke commented 3 months ago

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:

Tap targets are not sized appropriately 0% appropriately sized tap targets

Screenshot 2024-03-27 at 23 19 05
adamraine commented 3 months ago

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

romainmenke commented 3 months ago

Thank you for checking again! Interesting that it does work as expected in Lighthouse CLI.

adamraine commented 3 months ago

I made a minimum repro and filed an upstream bug in chrome: https://issues.chromium.org/u/1/issues/331757596

romainmenke commented 3 months ago

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 :)