Why is my @media screen and (max-width: 599px) not working in Safari, but it works fine in Chrome?

Why is my @media screen and (max-width: 599px) not working in Safari, but it works fine in Chrome? I have the following CSS: here is the code pen link: https://codepen.io/Chun-Tyng-ng/pen/GRaveEX @media screen and (max-width: 599px) { body { background-image: url("assets/images/background-mobile.png"); } } @media screen and (min-width: 600px) and (max-width: 1024px) { body { background-image: url("assets/images/background-tablet.png"); } } In Chrome, the max-width: 599px media query is applied correctly when resizing the screen, but in Safari, it does not trigger at all. However, the min-width: 600px and max-width: 1024px media query works as expected in both browsers. I've already tried: Adding !important to background-image. Clearing Safari's cache and reloading with Cmd + Shift + R. Checking if the background-mobile.png path is correct by opening it in the browser. Testing in Safari's Developer Tools, but the max-width: 599px rule is completely missing. What could be causing this issue in Safari, and how can I fix it?
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?