CSS :not issue in Safari on iOS9

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.

Josh Sherman - The Man, The Myth, The Avatar

About Josh

Husband. Father. Pug dad. Musician. Founder of Holiday API, Head of Engineering and Emoji Specialist at Mailshake, and author of the best damn Lorem Ipsum Library for PHP.


If you found this article helpful, please consider buying me a coffee.