: nth-child does not work on iosSafari 8

Question

I am using an iPad with ios 8.02 and iosSafari 8.

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

I checked in the browser inspector and the above style rules iosSafari applies to each 1, 3, 7, 8 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 this style rule applies to every .item element. The media query is working correctly.

I use Telerik AppBuilder to debug a device on Windows, but you can see it on the device itself.

Here is a link to one of the pages with which it occurs. As much as possible, this happens on ios 8.02 with iosSafari 8. I checked on the browser stack the chrome emulator and the older iPad 2 with Safari, and no error occurred.

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

Any idea why this rule is not applied correctly?

Answer 1

See caniuse again.

On the Known Issues tab, one of the questions says:

iOS 8 Safari has issues with nth-child .

So believe it or not: nth-child does not work on iOS 8.

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

So (if the .item element is li ), your code becomes

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