pushState 후 iOS8 Safari : nth-child() 셀렉터가 작동하지 않음

편집 됨 : 이 버그는 Apple에보고되었으며 지금은 폐쇄되어 베타 iOS 9.0 (13A4254v)에서 테스트되었으며 올바르게 작동합니다. 나는 웹 페이지에서 기사의 무리가pushState 후 iOS8 Safari : nth-child() 셀렉터가 작동하지 않음

, 사업부 (열)에 랩의 모든 : 편집 나은 설명을

. 이 기사에는 절대 위치와 고정 너비 및 높이를 가진 클래스가 있습니다.

가 적용 할 수있는 버튼입니다 : - 래퍼에 translate3d/열 - 모든 스타일의 모든 기사에 올바르게 적용되는 window.history.pushState

,하지만 난 버튼을 눌러 때 pushState 이후에 nth-child() 스타일의 전부 또는 일부가 올바르게 적용되지 않습니다 (왼쪽, 위쪽 및 너비). 내가 : nth-child()를 변경하면 : nth-of-type()은 모두 pushState 이후에 올바르게 작동합니다.

사파리가 클릭 버튼을 누른 후 판독기 모드로 전환 할 가능성을 활성화하고 translate3d 요소 (하드웨어 가속화)에 영향을 미칠 때 문제가 보이는 것 같습니다.

iPad2, iPad3 망막 및 4를 사용하는 Safari iOS8에서 발생합니다. iPad 미니 망막을 사용해도 문제가되지 않습니다. 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>

당신은 그런 일을 경험?

출처

2014-09-25 josea

문제가 표시 될 것으로 보인다. 같은 코드가 나열된 간단한 HTML 페이지에서 문제를 재현 할 수 있지만 기사에 몇 개의 텍스트를 포함하여 사파리가 리더 모드 버튼을 활성화 할 수 있도록합니다. – josea

실제로 nth-child은 IOS8에서 작동하지 않습니다.

nth-of-type에 대한 스위칭은 나를 위해 트릭을했습니다.

그것은 잘 당신이 기회를 취하지하려는 경우, 당신은 다음과 IOS 8을 감지 할 수 있다고 말했다

https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type을 지원합니다. 이것이 내가 아이폰 OS 8 및 CSS 선택의 문제에 대한 발견 한 유일한 게시물로

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

출처

2014-09-30 19:37:30 svassr

그게 내가 채택한 솔루션은 그 의미 론적 의미가 불편하다는 것이다. : nth-of-type()과 다른 : nth-child(). 그 버그를 사과에 등록 했어. 감사. – josea

나는 그것이 관심사의 분리가 적다는 것에 동의한다. 선택자에서 tagname을 사용하는 것은 나에게 이상적인 것이 아닙니다. 버그를 신고 해 주셔서 감사합니다. – svassr

안녕하세요, @josea에 버그 보고서에 대한 링크가 있습니까? – csilk

목록에 새 요소를 추가 할 때 (예 : AJAX) :nth-child(2n+1)이 모든 새로운 요소에 적용되는 것처럼 보입니다.

iOS8을 실행하는 32 비트 장치에서만 발생합니다 (예 : iPhone5는 지원하지만 iPhone5 또는 6은 지원하지 않으며 iPhone5 시뮬레이터는 지원하지 않음).

해결 방법은 Apple에서이 문제를 해결할 때까지 :nth-of-type()을 사용하는 것입니다.

출처

2014-09-26 22:08:05

나는 비슷한 문제가 발생하고 난 여기 경우 다른 사람을 추가 해요 찾고 온.

내 특정 문제는 자바 스크립트에 의해 생성 된 요소를 선택하는 n 번째의 아이를 사용하여, 우리는 svassr으로, 더 이상

nth-of-type아이폰 OS 8에 노력하고 있습니다 n 번째 아이, 잘 사용 작업을 수행 할 상태는 his answer입니다.

iOS 8 및 nth-child CSS 선택기와 함께 document.querySelectAll의 문제점을 보여주는 js sample (끝 부분의 코드)을 만들었습니다.

특히 here에서 추측하고 특히 아래 인용문에서는 선택기를 캐싱하거나 사전 처리한다고 생각합니다.

iOS 8은 document.querySelectorAll에서 4 배 개선 된 모든 영역에서 iOS7보다 상당히 빠릅니다. 사파리 리더 모드로 전환 할 수있는 가능성을 활성화 할 때를 판정

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

출처

2014-10-21 08:38:05 lpr

pushState 후 iOS8 Safari : nth-child() 셀렉터가 작동하지 않음

답변

관련 문제