:nth-child not working on iosSafari 8

Question

I'm using a iPad with ios 8.02 and iosSafari 8.

.itemgrid-3cols .item:nth-child(3n+1) {
    clear: left;
}

I checked in the browser inspector and above style rule is being applied by iosSafari to every 1st, 3rd, 7th, 8th and 9th .item

@media only screen and (max-width: 959px) and (min-width: 768px)
   .itemgrid-2cols .item:nth-child(2n+1), .itemgrid-3cols .item:nth-child(2n+1), .itemgrid-4cols .item:nth-child(2n+1), .itemgrid-5cols .item:nth-child(2n+1), .itemgrid-6cols .item:nth-child(2n+1), .itemgrid-7cols .item:nth-child(2n+1) 
   {
       clear: left !important;
   }
}

And that style rule is being applied to every .item element. The media query is working properly.

I'm using Telerik AppBuilder to debug the device on Windows, but it you can see this on the device itself.

Here is a link to one of the pages it is occurring. It only occurs on ios 8.02 with iosSafari 8 as far as I can see. I checked on browser stack, the chrome emulator and an older iPad 2 with Safari and the error did not occur.

I also checked caniuse.com and it says that the :nth-child works on iosSafari 8.

Any idea, why this rule is not being applied correctly?

Answer 1

Look at caniuse again.

In the 'known issues' tab, one of the issues says:

iOS 8 Safari has issues with nth-child.

So believe it or not: nth-child doesn't work on iOS 8.

The workaround is of course to use nth-of-type instead - which does work on iOS 8

So (assuming the .item element is a li) your code becomes

.itemgrid-3cols li:nth-of-type(3n+1) {
    clear: left;
}