in Software Development #CSS #Apple

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.