KP-C

Kevin Powell - Community•12mo ago

Tyng

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?

CodePenChun Tyng ng

Untitled

...