[🐛 Bug]: Dependencies missing for CSS @media pointer support

[kristaps-aksjonovs]

What happened?

Hello.

Suspicion is that there is missing dependency that needs to be install for Docker. Our website is using CSS https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pointer. Chrome browser should register pointer:fine when mouse event is sent but it uses pointer:none.

For testing I'm using WebdriverIO.

Javascript injected into page to test

        const style = document.createElement("style");
        style.id = "hoverStyff";
        style.innerText = `@media (pointer: fine) {[data-role="my-button"] {background: red !important;}}@media (pointer: coarse) {[data-role="my-button"] {background: green !important;}}@media (pointer: none) {[data-role="my-button"] {background: blue !important;}}`;        const head = document.querySelector("head");
        if (head) {
            head.appendChild(style);
        }

Expected:

Red Background would appear

@media (pointer: fine) {[data-role="my-button"] {background: red !important;}}

Actual

Blue background appears.

When executing tests against local Chrome on MacOS expected red background is displayed but in container blue. I also tried to add Chrome start arguments:

--blink-settings=primaryHoverType=2,availableHoverTypes=2,primaryPointerType=4,availablePointerTypes=4

but it didn't help.

Command used to start Selenium Grid with Docker (or Kubernetes)

docker run -d -p 4444:4444 -p 7900:7900 --shm-size="2g" selenium/standalone-chrome:108.0

Relevant log output

-

Operating System

macOS Sonoma 14.5

Docker Selenium version (image tag)

selenium/standalone-chrome:108.0

Selenium Grid chart version (chart version)

No response

[github-actions[bot]]

@kristaps-aksjonovs, thank you for creating this issue. We will troubleshoot it as soon as we can.

---

Info for maintainers

Triage this issue by using labels.

If information is missing, add a helpful comment and then I-issue-template label.

If the issue is a question, add the I-question label.

If the issue is valid but there is no time to troubleshoot it, consider adding the help wanted label.

If the issue requires changes or fixes from an external project (e.g., ChromeDriver, GeckoDriver, MSEdgeDriver, W3C), add the applicable G-* label, and it will provide the correct link and auto-close the issue.

After troubleshooting the issue, please add the R-awaiting answer label.

Thank you!

[VietND96]

macOS Sonoma 14.5

Is this Apple M-series chip? If yes, can you try recently standalone-chromium image tag and confirm. I feel this issue could be related to Chromedriver, and there is no actionable from the docker side.

[kristaps-aksjonovs]

Hello @VietND96 , I checked with latest standalone-chromium same reproducible. I also tried to run on MacBook Intel version, chrome and chromium and also the same.

[kristaps-aksjonovs]

Any updates on this?

[VietND96]

Did you try to run the test without docker selenium? If you are facing the same issue, I think it is an issue with Chromedriver.

[VietND96]

One more query, did your test run in headless mode? Since I saw you mentioned that

Chrome browser should register pointer:fine when mouse event is sent but it uses pointer:none.

So, if you are running in headless mode, try to disable it.

[a-maggi]

For anyone else who is having this issue, a fix to force chromiums to apply the media query pointer is by adding the following flags: '--blink-settings=primaryPointerType=4'