iOS8 Safari在pushState之后:nth-child(）选择器不起作用
iOS8 Safari after a pushState the :nth-child() selectors not works
编辑：我向苹果报告了这个错误，现在它已经关闭，在测试版iOS 9.0（13A4254v）上进行了测试，工作正常。
编辑以更好地解释：
我在一个网页中有一堆文章，它们都封装在一个div（列）中。这些文章有一个类，有绝对的位置，有固定的宽度和高度。
有一个按钮可以应用：-包装器/列的翻译3d-窗口历史推送状态
所有的样式都正确地应用于所有的文章，但当我按下按钮并在pushState之后，所有/一些nth-child（）样式都没有正确地应用（左、上和宽）。如果我将：nth-child（）更改为：nth-of-type（），那么在pushState之后，所有操作都会正确。
当safari在按下点击按钮并影响translate3d元素（硬件加速）后，决定激活切换到阅读器模式的可能性时，问题似乎是显而易见的。
它发生在使用iPad2、iPad3视网膜和4的Safari iOS8上。使用iPad迷你视网膜不会发生这种情况。使用iOS7和之前的一切都可以正常工作，但使用iOS8没有工作。
代码：
<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>
你经历过这样的事情吗？
实际上nth-child在IOS8上不起作用。
切换到nth-of-type对我来说很有用。
它得到了很好的支持https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-类型
也就是说，如果你不想冒险，你可以检测IOS8如下。
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');
}
当将新元素添加到列表时（例如使用AJAX），:nth-child(2n+1)将应用于每个新元素。
这种情况只发生在运行iOS8的32位设备上（例如，iPhone 5，但不是iPhone 5s或6，甚至不是iPhone 5模拟器）。
解决方案是在Apple解决此问题之前使用:nth-of-type()。
我遇到了类似的问题，我将在这里添加它，以防其他人看到，因为这是我发现的唯一一篇关于iOS 8和CSS选择器问题的帖子。
我的特殊问题是使用第n个child来选择由Javascript创建的元素，我们很好地利用了第n个child，它在iOS8上不再工作。
正如svassr在回答中所说，nth-of-type确实有效。
我创建了一个js示例（最后也是代码），它显示了iOS8和document.querySelectAll以及第n个子css选择器的问题。
根据这里的信息，特别是下面的引用，我认为他们正在缓存或预处理选择器。
iOS 8在各个方面也明显快于iOS7，文档改进了4倍。querySelectorAll.
<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>
相关文章：
- 属性选择器不起作用(语法错误、无法识别的表达式）
- asp.net jquery 日期选择器不起作用
- 在mvc上使用日期选择器不起作用
- JavaScript id 选择器不起作用?不知道出了什么问题
- 在下拉列表中更改选择器不起作用
- 引导时间选择器不起作用
- CSS - 父子选择器不起作用
- CSS 中的选择器不起作用
- jQuery-UI 日期选择器不起作用
- 日期时间选择器不起作用.不明白怎么写JS
- CSS 选择器不起作用
- CSS 不选择器不起作用
- AngularJS指令，jQuery类选择器不起作用
- Jquery UI 日期选择器不起作用
- 添加新行动态引导日期时间选择器不起作用
- 多个jquery或javascript和日期选择器不起作用
- 带有 “.” “_” 的 Jquery 选择器不起作用
- jQuery动态创建的日期选择器不起作用
- 字符串和变量连接作为jQuery选择器不起作用.可能的原因是关闭
- 模式中的引导日期选择器不起作用
