Подтвердить что ты не робот

IOS8 Safari после нажатия кнопки PushState: nth-child() не работает

Отредактировано: Я сообщил об этой ошибке Apple и теперь ее закрыл, протестировал на бета-версии iOS 9.0 (13A4254v) и работает правильно.

Отредактировано для лучшего объяснения:

У меня есть куча статей на веб-странице, все они завернуты в div (столбец). Эти статьи имеют класс с абсолютным положением и фиксированной шириной и высотой.

есть кнопка для применения: - перевод translate3d в обертку/столбец - window.history.pushState

Все стили применяются ко всем статьям правильно, но когда я нажимаю кнопку и после pushState все/некоторые стили nth-child() применяются неправильно (слева, сверху и ширине). Если я изменяю: nth-child() на: nth-of-type(), все работает правильно после pushState.

Проблема кажется видимой, когда сафари определяет, чтобы активировать возможность переключения в режим чтения после нажатия кнопки клика и влияет на элементы translate3d (аппаратное ускорение).

Это происходит на Safari iOS8, используя iPad2, iPad3 retina и 4. Это не происходит с помощью 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>

Вы испытали что-то подобное?

4b9b3361

ОТВЕТЫ

Ответ 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');
}

Ответ 2

При добавлении новых элементов в список (например, с помощью AJAX) :nth-child(2n+1) применяется к каждому новому элементу.

Это происходит только на 32-разрядных устройствах под управлением iOS8 (например, iPhone5, но не iPhone 5 или 6 и даже не iPhone5 Simulator).

Решение заключается в использовании :nth-of-type(), пока Apple не решит эту проблему.

Ответ 3

Я столкнулся с подобной проблемой, и я добавляю ее здесь, если другие приходят, потому что это единственное сообщение, которое я нашел в отношении проблем с селектором iOS 8 и CSS.

Моя особая проблема заключается в использовании nth-child для выбора элементов, созданных Javascript, и мы хорошо используем nth-child, который больше не работает на iOS 8.

nth-of-type работает как svassr в его ответ.

Я создал js sample (также код в конце), который показывает проблему с iOS 8 и document.querySelectAll в сочетании с Селектор nth-child css.

Вывод из info здесь и, в частности, цитата ниже, я думаю, что они кэшируют или предварительно обрабатывают селектор.

iOS 8 также значительно быстрее, чем iOS7 в каждой области с улучшением в 4 раза в document.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>