Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[useMediaQuery] Result of useMediaQuery("(max-width: 767px)") at 767px is false on Windows #43478

Closed
DanielBarbakadze opened this issue Aug 27, 2024 · 5 comments
Assignees
Labels
external dependency Blocked by external dependency, we can’t do anything about it hook: useMediaQuery

Comments

@DanielBarbakadze
Copy link

DanielBarbakadze commented Aug 27, 2024

Steps to reproduce

Link to live example: (Live Demo)

Steps:

  1. Use code fragment useMediaQuery("(max-width: 767px)" anywhere in a code
  2. Check the value of it on macOS or Linux, it will be true
  3. Check the value of it on Windows it will be false

It goes for all Browsers: Safari, Chrome, Firefox, Edge

Current behavior

useMediaQuery("(max-width: 767px)" returns false on Windows and true on macOS and Linux

Expected behavior

useMediaQuery("(max-width: 767px)" returns true on all OS

Context

I just found out that some of my markup was messing around on Windows exactly at 767px, after debugging I found out it only happens on Windows at exactly that pixel screen width.

Your environment

npx @mui/envinfo
  System:
    OS: macOS 14.6.1
  Binaries:
    Node: 20.10.0 - ~/.nvm/versions/node/v20.10.0/bin/node
    npm: 10.2.3 - ~/.nvm/versions/node/v20.10.0/bin/npm
    pnpm: 8.15.9 - /opt/homebrew/bin/pnpm
  Browsers:
    Chrome: 128.0.6613.85
    Edge: Not Found
    Safari: 17.6
  npmPackages:
    @emotion/react:  11.13.3 
    @emotion/styled: ^11.13.0 => 11.13.0 
    @mui/core-downloads-tracker:  6.0.0 
    @mui/material: ^6.0.0 => 6.0.0 
    @mui/private-theming:  6.0.0 
    @mui/styled-engine:  6.0.0 
    @mui/system:  6.0.0 
    @mui/types:  7.2.16 
    @mui/utils:  6.0.0 
    @types/react:  18.3.4 
    react: ^18.3.1 => 18.3.1 
    react-dom: ^18.3.1 => 18.3.1 
    typescript:  4.9.5 

Search keywords: useMediaQuery

@DanielBarbakadze DanielBarbakadze added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Aug 27, 2024
@DanielBarbakadze DanielBarbakadze changed the title [useMediaQuery] Result of useMediaQuery("(max-width: 767px)") is false on Windows [useMediaQuery] Result of useMediaQuery("(max-width: 767px)") at 767px is false on Windows Aug 27, 2024
@oliviertassinari
Copy link
Member

oliviertassinari commented Aug 27, 2024

It's a feedback about the window.matchMedia API no? Not really useMediaQuery? It reminds me a bit of #22812.

@siriwatknp
Copy link
Member

@DanielBarbakadze Can you try using window.matchMedia directly in your devtools? Let us know the result.

@siriwatknp siriwatknp added status: waiting for author Issue with insufficient information and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Aug 28, 2024
@DanielBarbakadze
Copy link
Author

DanielBarbakadze commented Aug 28, 2024

Thanks for the quick response @oliviertassinari, @siriwatknp

I've updated the (Live Demo) link, looks like this is window.matchMedia issue.

Screenshot from Macbook:
image

Screenshot from Windows:
image

What's the best I can do in this case?

@github-actions github-actions bot added status: waiting for maintainer These issues haven't been looked at yet by a maintainer and removed status: waiting for author Issue with insufficient information labels Aug 28, 2024
@oliviertassinari oliviertassinari added the external dependency Blocked by external dependency, we can’t do anything about it label Aug 28, 2024
@siriwatknp siriwatknp removed the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Aug 29, 2024
@siriwatknp
Copy link
Member

What's the best I can do in this case?

Is it possible to switch the implementation from JS to CSS?

If you want to show/hide a component, I recommend using CSS:

<Box sx={{ display: { xs: 'none', md: 'block' } }}></Box>

@DanielBarbakadze
Copy link
Author

Thanks for the suggestion. I prefer to wait until windows.matchPoint works again on Windows as expected.

I am closing this since it's not related to MUI anymore as it turned out.

Thanks 🤚

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
external dependency Blocked by external dependency, we can’t do anything about it hook: useMediaQuery
Projects
None yet
Development

No branches or pull requests

3 participants