iOS8 Safari po wciśnięciu przycisku selektory:nth-child() nie działają

Edytowane: Zgłosiłem ten błąd Do Apple i teraz jest zamknięty, testowany na beta iOS 9.0 (13a4254v) i działa poprawnie.

Edytowane dla lepszego wyjaśnienia:

Mam kilka artykułów na stronie internetowej, wszystkie zawinięte w div (kolumna). Artykuły te mają klasę o pozycji bezwzględnej oraz stałej szerokości i wysokości.

Jest przycisk, aby zastosować: - a translate3d do owijarki / kolumny - okno.historia.pushState

Wszystkie style są poprawnie stosowane do wszystkich artykuły, ale kiedy nacisnę przycisk i po pushState, wszystkie / niektóre style NTH-child() nie zostaną poprawnie zastosowane (left, top i width). Jeśli zmienię :nth-child () na: nth-of-type () wszystko działa poprawnie po pushState.

Problem wydaje się widoczny, gdy safari zdecyduje się aktywować możliwość przełączenia w tryb czytnika, po naciśnięciu przycisku click i wpływa na elementy translate3d (akceleracja sprzętowa).

Działa na Safari iOS8 używając ipad2, ipad3 oraz 4. to nie happends za pomocą iPad mini siatkówki. Używanie iOS7 i przed wszystkim działa poprawnie, ale nie działa przy użyciu iOS8.

Kod: 

<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>
Doświadczyłeś czegoś takiego?
Author: josea, 2014-09-25
Source

3 answers

Rzeczywiście nth-child nie działa na IOS8.

Zamiana na nth-of-type załatwiła mi sprawę.

Jest dobrze wspierany https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type

To powiedziane, jeśli nie chcesz ryzykować, możesz wykryć IOS 8 w następujący sposób. 

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');
}
 40
Author: svassr,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-12-19 17:02:18

Przy dodawaniu nowych elementów do listy (np. za pomocą AJAX) :nth-child(2n+1) pojawia się zastosowanie do każdego nowego elementu.

[2]}dzieje się tak tylko na 32-bitowych urządzeniach z systemem iOS8 (np. iPhone5, ale nie iPhone 5s lub 6, a nawet nie iPhone5 Simulator).

Rozwiązaniem jest użycie :nth-of-type() dopóki Apple nie rozwiąże tego problemu.

 3
Author: Anton Bielousov,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-02-27 19:27:18

Napotkałem podobny problem i dodaję go tutaj na wypadek, gdyby inni szukali, ponieważ jest to jedyny post, jaki znalazłem dotyczący problemów z iOS 8 i selektorem CSS.

Moim szczególnym problemem jest użycie NTH-child do wybierania elementów utworzonych przez Javascript, a my dobrze wykorzystujemy nth-child, który nie działa już na iOS 8.

nth-of-type czy działa, jak stwierdza svassr w jego odpowiedź.

Stworzyłem próbkę js (również kod na końcu), która pokazuje problem z systemem iOS 8 i dokumentem.querySelectAll w połączeniu z N-tym-potomnym selektorem css.

Spekulując z info tutaj , a w szczególności cytat poniżej, myślę, że buforują lub wstępnie przetwarzają selektory.

IOS 8 jest również znacznie szybszy niż iOS7 w każdym obszarze z 4-krotną poprawą dokumentu.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>
 3
Author: lpr,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:01:31