Fatal编程技术网
  • javascript/
  • Javascript 按下状态后的iOS8 Safari:n-child（）选择器不起作用

Javascript 按下状态后的iOS8 Safari:n-child（）选择器不起作用

javascript css safari ios8

Javascript 按下状态后的iOS8 Safari:n-child（）选择器不起作用,javascript,css,safari,ios8,css-selectors,Javascript,Css,Safari,Ios8,Css Selectors,编辑： 我向苹果公司报告了这个bug，现在它已经关闭，在测试版iOS 9.0（13A4254v）上测试，并且工作正常 为更好地解释而编辑： 我在一个网页上有一堆文章，都被包装成一个div（column）。这些物品具有绝对位置、固定宽度和高度的类别 有一个按钮可应用： -将translate3d转换为包装器/列 -窗口、历史、状态 所有样式都正确地应用于所有文章，但当我按下按钮并在pushState之后，所有/部分第n-child（）样式都没有正确应用（左、上和宽）。如果我将：nth-child（

编辑： 我向苹果公司报告了这个bug，现在它已经关闭，在测试版iOS 9.0（13A4254v）上测试，并且工作正常

为更好地解释而编辑：

我在一个网页上有一堆文章，都被包装成一个div（column）。这些物品具有绝对位置、固定宽度和高度的类别

有一个按钮可应用： -将translate3d转换为包装器/列 -窗口、历史、状态

所有样式都正确地应用于所有文章，但当我按下按钮并在pushState之后，所有/部分第n-child（）样式都没有正确应用（左、上和宽）。如果我将：nth-child（）更改为：nth-of-type（），则在pushState之后所有操作都正常

在按下click按钮并影响translate3d元素（硬件加速）后，当safari决定激活切换到读卡器模式的可能性时，问题似乎显而易见

它发生在SafariIOS8上，使用iPad2、iPad3和4。使用iPad迷你视网膜不会发生这种情况。使用iOS7和之前的版本都可以正常工作，但使用iOS8则无法正常工作

代码：


身体{
位置：相对位置；
宽度：100%；
身高：100%；
填充：0；
保证金：0；
溢出：隐藏；
}
#纵队{
-webkit转换：0.35s；转换：0.35s；
-webkit转换：translate3d（0px，0px，0px）；
位置：绝对位置；
顶部：10px；
左：10px；
边框：1px纯灰；
宽度：300px；
身高：225px；
}
.moveColumn{
-webkit转换：translate3d（200px，0px，0px）！重要；
}
文章{
位置：绝对位置；
溢出：隐藏；
}
第条：第N名儿童（1）{
左：0；
排名：0；
宽度：300px；
高度：300px；
背景色：红色；
}
第条：第N名儿童（2）{
左：0px；
顶部：305px；
宽度：605px；
高度：300px；
背景颜色：蓝色；
}
第条：第N名儿童（3）{
左：305px；
排名：0；
宽度：300px；
高度：300px；
背景颜色：绿色；
}
.按钮{
位置：绝对位置；
左：10px；
顶部：250px；
背景颜色：灰色；
}
var向量=0；
函数moveColumn（）{
var column=document.querySelector（“#column”）；
column.classList.toggle（'moveColumn'）；
var obj={}；
obj.sectionId=“section”；
window.history.pushState（obj，“TITLE”、“/？vp=“+veces”）；
向量++；
}
Lorem ipsum dolor sit amet，是一位杰出的献身者。在eu urna quam。同侧双下肢静脉曲张，静脉曲张。Nullam fringilla libero是一个不合法的孕妇。效率之王，拍卖人之王，智慧之王，智慧之王。在洛雷姆·ac·多洛尔·费吉亚特·卢克图斯。Lorem ipsum dolor sit amet，是一位杰出的献身者。莫比·维韦拉·维利特是一名侵权人。我们的权杖是马萨，利奥·鲁特鲁姆·布兰迪特。
在nec convallis nunc，所有设施均未安装。孕妇、埃拉特·埃吉特·埃利芬德·维韦拉、艾利特·拉库斯·乌尔特里斯·图皮斯、猫咪的生命。整型三人一人一组。马萨索达莱斯的普拉森。阿利奎姆·埃拉特·帕特。埃蒂亚姆·马克西姆·马萨是一个权杖。Pellentesque facilisis enim nec diam viverra facilisis。莫比非尼布无主。在乌尔纳港，在欧盟对岸，在太平洋门。Nam quam odio，拉奥里特在尼西，普卢斯港。在弗林里拉麦格纳ac accumsan commodo。
Lorem ipsum dolor sit amet，是一位杰出的献身者。在eu urna quam。同侧双下肢静脉曲张，静脉曲张。Nullam fringilla libero是一个不合法的孕妇。效率之王，拍卖人之王，智慧之王，智慧之王。在洛雷姆·ac·多洛尔·费吉亚特·卢克图斯。Lorem ipsum dolor sit amet，是一位杰出的献身者。莫比·维韦拉·维利特是一名侵权人。我们的权杖是马萨，利奥·鲁特鲁姆·布兰迪特。
在nec convallis nunc，所有设施均未安装。孕妇、埃拉特·埃吉特·埃利芬德·维韦拉、艾利特·拉库斯·乌尔特里斯·图皮斯、猫咪的生命。整型三人一人一组。马萨索达莱斯的普拉森。阿利奎姆·埃拉特·帕特。埃蒂亚姆·马克西姆·马萨是一个权杖。Pellentesque facilisis enim nec diam viverra facilisis。莫比非尼布无主。在乌尔纳港，在欧盟对岸，在太平洋门。Nam quam odio，拉奥里特在尼西，普卢斯港。在弗林里拉麦格纳ac accumsan commodo。
Lorem ipsum dolor sit amet，是一位杰出的献身者。在eu urna quam。同侧双下肢静脉曲张，静脉曲张。Nullam fringilla libero是一个不合法的孕妇。效率之王，拍卖人之王，智慧之王，智慧之王。在洛雷姆·ac·多洛尔·费吉亚特·卢克图斯。Lorem ipsum dolor sit amet，是一位杰出的献身者。莫比·维韦拉·维利特是一名侵权人。我们的权杖是马萨，利奥·鲁特鲁姆·布兰迪特。
在nec convallis nunc，所有设施均未安装。孕妇、埃拉特·埃吉特·埃利芬德·维韦拉、艾利特·拉库斯·乌尔特里斯·图皮斯、猫咪的生命。整型三人一人一组。马萨索达莱斯的普拉森。阿利奎姆·埃拉特·帕特。埃蒂亚姆·马克西姆·马萨是一个权杖。Pellentesque facilisis enim nec diam viverra facilisis。莫比非尼布无主。在乌尔纳港，在欧盟对岸，在太平洋门。Nam quam odio，拉奥里特在尼西，普卢斯港。在弗林里拉麦格纳ac accumsan commodo。
单击我以移动列
你经历过什么吗 
<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>

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

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