个人中心
gpt4 book ai didi

javascript - iOS8 Safari pushState 后出现:nth-child() selectors not works

转载 作者：技术小花猫 更新时间：2023-10-29 10:14:34 33 4
gpt4 key购买 nike

编辑:我向 Apple 报告了这个错误，现在它已关闭，在测试版 iOS 9.0 (13A4254v) 上进行了测试并且可以正常工作。

为了更好的解释而编辑:

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

有一个应用按钮:- 包装器/列的 translate3d- 一个 window.history.pushState

所有样式都正确应用于所有文章，但是当我按下按钮并在 pushState 之后，所有/某些第 nth-child() 样式未正确应用(左、上和宽度)。如果我将 :nth-child() 更改为 :nth-of-type()，则在 pushState 之后一切正常。

当 safari 在按下点击按钮并影响 translate3d 元素(硬件加速)后确定激活切换到阅读器模式的可能性时，问题似乎是可见的。

它发生在使用 iPad2、iPad3 retina 和 4 的 Safari iOS8 上。它不会发生在使用 iPad mini retina 的情况下。使用 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-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');
}

关于javascript - iOS8 Safari pushState 后出现:nth-child() selectors not works，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26032513/

33 4 0
文章推荐： css - 在 Rails 应用程序中包含 Google 字体
文章推荐： ios - 读取 NSURLresponse
文章推荐： iphone - 有没有办法手动向 iPhone 设备发送内存警告？
文章推荐： css - 删除古腾堡 CSS
技术小花猫
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com