Safari undoes media queries

Question

I'm working on a responsive design for tablet-smartphone range.

Here is the media query I'm using for this range of device:

@media (min-width: 300px) and (max-width: 999px) {
    header nav ul {
        display: none;
    }
}

All this one does is hide the navigation bar list if the screen width is between 300-999px.

This works fine on Chrome, but on Safari, the page initially loads taking the media queries into account. A few seconds after the page has loaded, the media queries are cancelled out and the page reverts to it's default layout.

The same happens on my iPhone Safari. Media queries work fine on Chrome (on Desktop and Android)

How can I make sure my media queries are always enforced on Safari (desktop/iPhone)?

You can see the page here for yourself

EDIT:

I've added:

<meta name="viewport" content="width=device-width, initial-scale=1.0;">

This doesn't solve the problem. It helps with the zoom but the nav bar still pops back in when page completely loaded.

Answer 1

You are getting some very weird results in Safari, where your media queries can't override the main classes even though you load them afterwards.

I have only tried this in dev tools but by going up a step in the DOM tree it seems to force your media queries to behave properly.

@media (min-width: 300px) and (max-width: 999px) {
    body header nav ul {
        display: none;
    }
}