1. 首页
  2. 问题
  3. 在pushState之后的iOS8 Safari：nth-​​child（）选择器不起作用
一尘不染

在pushState之后的iOS8 Safari：nth-​​child（）选择器不起作用

css

编辑：我已将此错误报告给Apple，现已关闭，已在Beta iOS 9.0（13A4254v）上进行了测试，并且可以正常运行。

编辑以获得更好的解释：

我在网页中有一堆文章，所有文章都包裹在div（列）中。这些文章的类具有绝对位置，并且宽度和高度固定。

有一个按钮可以应用：-到包装器/列的translation3d-一个window.history.pushState

所有样式都正确地应用于所有文章，但是当我按下按钮并在pushState之后，所有/某些nth-
child（）样式都没有正确地应用（左，上和宽度）。如果我将：nth-​​child（）更改为：nth-​​of-
type（），则在pushState之后所有功能都可以正常工作。

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

在使用iPad2，iPad3视网膜和4的Safari iOS8上会发生这种情况。在使用iPad
mini视网膜的情况下不会发生这种情况。使用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>

你经历过类似的事情吗？


阅读 253

收藏
2020-05-16

共1个答案

一尘不染

确实nth-child不适用于IOS8。

切换nth-of-type对我来说有用。

受到很好的支持https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-
type

就是说，如果您不想冒险，可以按照以下步骤检测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');
}
2020-05-16