javascript 在 pushState 之后的 iOS8 Safari :nth-child() 选择器不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26032513/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
iOS8 Safari after a pushState the :nth-child() selectors not works
提问by josea
Edited: I reported this bug to Apple and now its closed, tested on beta iOS 9.0 (13A4254v) and works correctly.
编辑：我向 Apple 报告了这个错误，现在它已经关闭，在 beta iOS 9.0 (13A4254v) 上测试并正常工作。
Edited for better explanation:
编辑以获得更好的解释：
I have a bunch of articles in a web page, all wrapped into a div (column). These articles have a class with absolute position, and fixed width and height.
我在一个网页中有一堆文章，都包裹在一个 div（列）中。这些文章有一个具有绝对位置和固定宽度和高度的类。
there is a button to apply: - a translate3d to the wrapper/column - a window.history.pushState
有一个按钮可以应用： - 一个到包装器/列的 translate3d - 一个 window.history.pushState
All the styles are applied correctly to all the articles, but when i push the button and after the pushState, all/some of the nth-child() styles are not applied correctly (left, top and width). If i change the :nth-child() to :nth-of-type() all works correctly after the pushState.
所有样式都正确应用于所有文章，但是当我按下按钮并在 pushState 之后，所有/某些 nth-child() 样式都没有正确应用（左、上和宽度）。如果我将 :nth-child() 更改为 :nth-of-type() 在 pushState 之后一切正常。
The problem seems to be visible when safari determines to activate the possibility to switch into reader mode, after pushing the click button and affects to the translate3d elements (hardware accelerated).
当 safari 在按下单击按钮并影响 translate3d 元素（硬件加速）后，确定激活切换到阅读器模式的可能性时，问题似乎很明显。
It happends on Safari iOS8 using iPad2, iPad3 retina and 4. it don't happends using an iPad mini retina. Using iOS7 and before all works correctly, but no works using iOS8.
它发生在使用 iPad2、iPad3 视网膜和 4 的 Safari iOS8 上。使用 iPad mini 视网膜不会发生。使用 iOS7 和之前都可以正常工作，但使用 iOS8 无法正常工作。
Code:
代码：
<html>
<head>
<meta name="viewport" content="initial-scale = 1.0, maximum-scale = 1.0, minimum-scale = 1.0, user-scalable = 1.0">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
body {
position: relative;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
overflow: hidden;
}
#column {
-webkit-transition: 0.35s; transition: 0.35s;
-webkit-transform: translate3d(0px, 0px, 0px);
position: absolute;
top: 10px;
left: 10px;
border: 1px solid Grey;
width: 300px;
height: 225px;
}
.moveColumn {
-webkit-transform: translate3d(200px, 0px, 0px) !important;
}
article {
position: absolute;
overflow: hidden;
}
article:nth-child(1) {
left: 0;
top: 0;
width: 300px;
height: 300px;
background-color: Red;
}
article:nth-child(2) {
left: 0px;
top: 305px;
width: 605px;
height: 300px;
background-color: Blue;
}
article:nth-child(3) {
left: 305px;
top: 0;
width: 300px;
height: 300px;
background-color: Green;
}
.button {
position: absolute;
left: 10px;
top: 250px;
background-color: Grey;
}
</style>
<script language="javascript">
var veces = 0;
function moveColumn() {
var column = document.querySelector('#column');
column.classList.toggle('moveColumn');
var obj = {};
obj.sectionId = "section";
window.history.pushState(obj, "TITLE", "/?vp=" + veces);
veces++;
}
</script>
</head>
<body>
<div id="column">
<article>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eu urna quam. Duis et pellentesque ipsum, vitae varius erat. Nullam fringilla libero id est aliquet gravida. Quisque efficitur, quam bibendum posuere auctor, turpis arcu pulvinar sapien, interdum iaculis purus metus id velit. In in lorem ac dolor feugiat luctus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi viverra velit sed massa viverra consequat id eu tortor. Ut scelerisque massa ut leo rutrum blandit.
Maecenas sit amet facilisis nulla, nec convallis nunc. Ut gravida, erat eget eleifend viverra, elit lacus ultrices turpis, vitae molestie felis tellus ac eros. Integer semper vitae sapien sit amet placerat. Praesent in sodales massa. Aliquam erat volutpat. Etiam maximus massa a scelerisque cursus. Pellentesque facilisis enim nec diam viverra facilisis. Morbi non nibh nulla. Praesent erat urna, porta sit amet dui eu, porta pulvinar metus. Nam quam odio, laoreet in nisi in, porta efficitur purus. In fringilla magna ac accumsan commodo.</article>
<article>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eu urna quam. Duis et pellentesque ipsum, vitae varius erat. Nullam fringilla libero id est aliquet gravida. Quisque efficitur, quam bibendum posuere auctor, turpis arcu pulvinar sapien, interdum iaculis purus metus id velit. In in lorem ac dolor feugiat luctus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi viverra velit sed massa viverra consequat id eu tortor. Ut scelerisque massa ut leo rutrum blandit.
Maecenas sit amet facilisis nulla, nec convallis nunc. Ut gravida, erat eget eleifend viverra, elit lacus ultrices turpis, vitae molestie felis tellus ac eros. Integer semper vitae sapien sit amet placerat. Praesent in sodales massa. Aliquam erat volutpat. Etiam maximus massa a scelerisque cursus. Pellentesque facilisis enim nec diam viverra facilisis. Morbi non nibh nulla. Praesent erat urna, porta sit amet dui eu, porta pulvinar metus. Nam quam odio, laoreet in nisi in, porta efficitur purus. In fringilla magna ac accumsan commodo.</article>
<article>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eu urna quam. Duis et pellentesque ipsum, vitae varius erat. Nullam fringilla libero id est aliquet gravida. Quisque efficitur, quam bibendum posuere auctor, turpis arcu pulvinar sapien, interdum iaculis purus metus id velit. In in lorem ac dolor feugiat luctus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi viverra velit sed massa viverra consequat id eu tortor. Ut scelerisque massa ut leo rutrum blandit.
Maecenas sit amet facilisis nulla, nec convallis nunc. Ut gravida, erat eget eleifend viverra, elit lacus ultrices turpis, vitae molestie felis tellus ac eros. Integer semper vitae sapien sit amet placerat. Praesent in sodales massa. Aliquam erat volutpat. Etiam maximus massa a scelerisque cursus. Pellentesque facilisis enim nec diam viverra facilisis. Morbi non nibh nulla. Praesent erat urna, porta sit amet dui eu, porta pulvinar metus. Nam quam odio, laoreet in nisi in, porta efficitur purus. In fringilla magna ac accumsan commodo.</article>
</div>
<div class="button" onclick="javascript:moveColumn();"> Click me to move column</div>
</body>
</html>
have you experienced something like that?
你有过这样的经历吗？
回答by svassr
Indeed nth-childdoesn't work on IOS8.
确实nth-child不适用于IOS8。
Switching for nth-of-typedid the trick for me.
切换为nth-of-type对我有用。
It's well supported https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type
它得到了很好的支持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.
也就是说，如果您不想冒险，可以按如下方式检测 IOS 8。
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');
}
回答by Anton Bielousov
When appending new elements to list (e.g. with AJAX) :nth-child(2n+1)appears applied to every new element.
将新元素添加到列表时（例如使用 AJAX）:nth-child(2n+1)出现应用到每个新元素。
This happens only on 32-bit devices running iOS8 (e.g. iPhone5 but not iPhone 5s or 6 and even not iPhone5 Simulator).
这只发生在运行 iOS8 的 32 位设备上（例如 iPhone5 但不是 iPhone 5s 或 6，甚至不是 iPhone5 Simulator）。
The solution is to use :nth-of-type()until Apple addresses this issue.
解决方案是使用:nth-of-type()直到 Apple 解决此问题。
回答by lpr
I have encountered a similar issue and I'm adding it here in case others come looking as this is the only post I have found regarding iOS 8 and CSS selector problems.
我遇到了一个类似的问题，我在这里添加它以防其他人来查看，因为这是我发现的唯一一篇关于 iOS 8 和 CSS 选择器问题的帖子。
My particular problem is using nth-child to select elements created by Javascript, and we make good use of nth-child, which is no longer working on iOS 8.
我的特殊问题是使用 nth-child 来选择由 Javascript 创建的元素，我们很好地利用了 nth-child，它不再适用于 iOS 8。
nth-of-typedoeswork, as svassr states in his answer.
nth-of-type确实有效，正如 svassr 在他的回答中所说。
I have created a js sample(also code at end) that shows the problem with iOS 8 and document.querySelectAll in conjunction with the nth-child css selector.
我创建了一个js 示例（也是最后的代码），它显示了 iOS 8 和 document.querySelectAll 与 nth-child css 选择器的问题。
Speculating from info here, and the quote below in particular, I think they're caching or pre-processing the selectors.
从 info here推测，特别是下面的引用，我认为他们正在缓存或预处理选择器。
iOS 8 is also significantly faster than iOS7 in every area with a 4x improvement in document.querySelectorAll.
iOS 8 在每个方面都比 iOS7 快得多，document.querySelectorAll 提高了 4 倍。
<style>
.red { border: 1px solid red; }
.green { border: 1px solid green; }
tr.test > td:nth-child(n) { background-color: yellow; }
</style>
<table id='tbl'>
<tr>
<td>a1</td><td>2</td><td>3</td><td>4</td><td>5</td>
</tr>
<tr class='test'>
<td>b1</td><td>2</td><td>3</td><td>4</td><td>5</td>
</tr>
<tr class='test'>
<td>c1</td><td>2</td><td>3</td><td>4</td><td>5</td>
</tr>
<tr>
<td>d1</td><td>2</td><td>3</td><td>4</td><td>5</td>
</tr>
<tr class='test'>
<td>e1</td><td>2</td><td>3</td><td>4</td><td>5</td>
</tr>
</table>
<script>
var row = $('<tr></tr>').addClass('test');
var cell1 = $('<td></td>').text('f1');
cell1.appendTo(row);
var cell2 = $('<td></td>').text('2');
cell2.appendTo(row);
var cell3 = $('<td></td>').text('3');
cell3.appendTo(row);
var cell4 = $('<td></td>').text('4');
cell4.appendTo(row);
var cell5 = $('<td></td>').text('5');
cell5.appendTo(row);
var tbl = $('#tbl');
row.appendTo(tbl);
var iRedCol = 3;
$('#tbl').find('tr.test > td:nth-child(' + iRedCol + ')').addClass('red');
var iGreenCol = 4;
$('#tbl').find('tr.test > td:nth-of-type(' + iGreenCol + ')').addClass('green');
</script>
