Ios8 Safari After a Pushstate the :Nth-Child() Selectors Not Works

iOS8 Safari after a pushState the :nth-child() selectors not works

Indeed nth-child doesn't work on IOS8.

Switching for nth-of-type did the trick for me.

It's well supported https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type

That said if you want to take no chance, you can detect IOS 8 as follow.

function isIOS8() {
  if ("600.1.4" == $.browser.version || ~navigator.userAgent.indexOf('OS 8_') ){
    return true;
  }
  return false;
}

var i=0,
    $el = $('ul.poll');

if( isIOS8() ){
    $el.find(' li:nth-of-type(' + (i + 1) + ')').text('my first Child');
}else{
    $el.find('.choice:nth-child(' + (i + 1) + ')').text('my first Child');
}

:nth-child not working on iosSafari 8

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;
}

IOS8 Safari website links do not work after scrolling

A developer at work managed to solve this issue by removing transitions between pages. See the code he commented out below. It was found in controllers.js. Hopefully this example will help you find the transition code in your project.

$scope.slide = '';
$rootScope.back = function() {

//$scope.slide = 'slide-right';
 $window.history.back();
}
$rootScope.go = function(path){
//$scope.navLeft = false;
//$scope.navRight = false;
//$scope.slide = 'slide-left';
$location.url(path);
}

Why does :nth-child(1) don't change the height and width?

You need add space for your selector .home :nth-child(1)

Example, normally if you write as .home:hover it mean div .home when hover will have property. With space it mean the child in .home

.home {
    position: absolute;
}

.home :nth-child(1) {
    height: 40px;
    left: 9.4rem;
    top: 16.4rem;
    width: 27.8rem;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="home">
        <img src="https://imgsv.imaging.nikon.com/lineup/dslr/df/img/sample/img_02_l.jpg" alt="Sample Image">
    </div>
</body>
</html>

iOS8 and Safari no longer working with Bluetooth scanner

Had the issue with a Socket CHS 7Mi Scanner till version 8.2 of iOS.

With the update to 8.3, this seems to be solved.

Safari 7.1 CSS Problems with sibling selector

This is a known bug in Safari (unsure about Safari 8) and older versions of Chrome. There are several workarounds but the one I've used in practice is just replacing + with the ~ combinator:

.checkbox input[type="checkbox"]:checked ~ input ~ label::after

Also here are other questions addressing the same bug:

Webkit bug with `:hover` and multiple adjacent-sibling selectors
CSS adjacent sibling selectors, Safari and <nav> elements

Ios8 Safari After a Pushstate the :Nth-Child() Selectors Not Works