CSS `:not` issue in Safari on iOS9

Josh Sherman
1 min read
Software Development CSS Apple

Seems that every time that Apple releases a new version of iOS I encounter some weird rendering issue. This time around with iOS9 I encountered an issue where the full / desktop version of the site looked like it still using some of the mobile / smaller device stylings.

After some inspection, I noticed that all of the elements on the page were rendering with the same width. I checked my stylesheet and sure enough, that width was there. The selector was a :not but with no selector on the left side of the colon:

:not(.comments form input[type='text']) {
  width: 450px;
}

Seemed harmless enough (aside from being over-qualified ;), wasn’t an issue in Chrome (Android and OSX), Firefox or even Safari on OSX. Since I couldn’t fucking remember why I would have added that CSS in there, I went ahead and commented it out.

EVERYTHING WORKED!!~! Best as I can gather, the :not lacking the selector before it was simply being ignored on most browsers but was being treated as *:not in Safari on iOS9.

As always, just putting this out there hoping that it may help someone else out.

Join the Conversation

Good stuff? Want more?

Weekly emails about technology, development, and sometimes sauerkraut.

100% Fresh, Grade A Content, Never Spam.

Related Articles