search

yocontra / react-responsive

CSS media queries in react - for responsive design, and more.
https://contra.io/react-responsive
MIT License
7.04k stars 298 forks source link

Doesn't work in Safari #263

Closed roboxdev closed 3 years ago

roboxdev commented 3 years ago

Hello.

I'm opening the demo in a macOS Safari Version 14.0.1 (16610.2.11.51.8) using responsive mode (iPhone 8). Demo says You are a desktop or laptop: image

I expect You are a tablet or mobile phone In comparison, here is the same demo with the same viewports on Chrome and Firefox. Both are fine.

image image

I'm struggling with the same issue in my project using the iPad (iOS 14) device.

yocontra commented 3 years ago

@roboxv Do the same media queries work when done in plain CSS? If so, then it is a bug we should look at - otherwise this is Safari interpreting media queries differently, and should be filed as a bug with their team.

yocontra commented 3 years ago

Other possibility is the new Safari responsive testing mode doesn't work as well as it should, maybe it requires a page reload to reflect the dimension change?

roboxdev commented 3 years ago

@roboxv Do the same media queries work when done in plain CSS? If so, then it is a bug we should look at - otherwise this is Safari interpreting media queries differently, and should be filed as a bug with their team.

Yes, media queries in a plain CSS work. Just checked it.

Other possibility is the new Safari responsive testing mode doesn't work as well as it should, maybe it requires a page reload to reflect the dimension change?

I don't think so. Page reload has no effect. And the issue also affects real devices.

yocontra commented 3 years ago

@roboxv That is really strange then - this library is just setting up browser media queries, it should be getting any different results between the CSS queries and the matchMedia JS queries. I just updated to big sur so I can test on the latest safari and see what the deal is.

yocontra commented 3 years ago

Looks like the issue is just https://stackoverflow.com/questions/38220485/safari-responsive-design-mode-css-media-query-device-not-applied (Safari doesn't like device-width anymore).

I've updated the sample website to reflect that reality so it is consistent between browsers - it was last published years ago so it was pretty out of date, I updated the repo to auto publish so it doesn't happen again.

I also updated the README to remove usage of device properties since they have unexpected behavior now - we don't want to be encouraging people to use them.