Safari ignoring css max-width media queries below

Question

I'm working on optimizing a responsive site and Safari (both desktop and mobile) seems to be completely ignoring media queries below a certain point. I have code like the following:

@media screen and (max-width: 767px){
    /* Safari responds to css here */
}
@media screen and (max-width: 640px){
    /* css here is ignored by Safari */
}

Firefox and Chrome both respond appropriately. Does anyone have any ideas about what is going on?

You can see the site here: http://kgillingham.webfactional.com. What should happen (and works on FF and Chrome) is that as the site becomes less than 640px the header font in the slider should become a smaller size.

edit: The site has now been updated to use javascript to add a class when the size is less than 640px. That class always uses the smaller font size. This means that it works as expected now, but I would much rather use CSS media queries than javascript so I would still like to see a solution.

Answer 1

Turns out I was missing a squiggly brace, so I had code like the following:

@media screen and (max-width: 767px){
    /* lots of css */
    .some_selector { padding: 20px; /*<---- missing squiggly brace*/
    /* more css */
}
@media screen and (max-width: 640px){
    /* lots more css */
}

Inserting the missing brace caused Safari to begin working. Other browsers didn't choke on the error which is partially why it was so difficult to track down.

Thanks for the help everyone, I feel pretty silly now.

Answer 2

@media rules are the same concept as normal css rules, the latest rule overwrites the first one. but if a rule is different it would not overrule it.

you could make a workaround by typing, this code would just interpreted by webkits

@media screen and (-webkit-min-device-pixel-ratio:0) {
    /* put webkit CSS here*/
}