Question

I’m about to launch a site and got to the browser testing phase, then opened it up in Firefox and it was completely broken. I looked at it a week or two ago and it was fine, so I had a feeling it was a single thing causing a lot of errors, and not a whole heap of browser incompatibility issues.

Anyway after a bit of debugging I found that all the CSS after this rule (below) wasn’t loading at all. I can’t see anything wrong with this rule. I’ve also determined that it’s not the content of the rule (-webkit-appearance: none), but the input[type=””] selectors.

/* Remove rounded corners in mobile webkit browsers */
input[type="text",
input[type="submit"],
input[type="button"],
input[type="tel"],
input[type="email"],
input[type="search"],
select,
textarea {
    -webkit-appearance: none;
} 

Does anyone have any idea why this would be causing Firefox issues?

For now I’ve just made it the last rule which is fine because this rule isn’t aimed at Firefox. But I’m really curious as to why it’s happening..?

Answer 1

You’ve got an unclosed bracket on the first line: input[type="text", should read input[type="text"],.

Firefox usually stops parsing CSS files when it encounters a syntax error, which is why the rest of the rules in the file aren’t applied.