javascript - only - iOS8 Safari después de un pushState los selectores: nth-child() no funcionan
overflow mobile browser (3)
Editado: informé de este error a Apple y ahora está cerrado, probado en la versión beta iOS 9.0 (13A4254v) y funciona correctamente.
Editado para una mejor explicación:
Tengo un montón de artículos en una página web, todos envueltos en un div (columna). Estos artículos tienen una clase con posición absoluta, y anchura y altura fijas.
hay un botón para aplicar: - un translate3d a la envoltura / columna - un window.history.pushState
Todos los estilos se aplican correctamente a todos los artículos, pero cuando presiono el botón y después de pushState, todos / algunos de los estilos nth-child () no se aplican correctamente (izquierda, arriba y ancho). Si cambio el: nth-child () a: nth-of-type (), todo funciona correctamente después del pushState.
El problema parece ser visible cuando el safari decide activar la posibilidad de cambiar al modo de lector, después de presionar el botón de clic y afecta a los elementos translate3d (hardware acelerado).
Ocurre en Safari iOS8 usando iPad2, retina iPad3 y 4. No sucede usando una retina mini iPad. Usar iOS7 y antes de todo funciona correctamente, pero no funciona con iOS8.
Código:
<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>
¿Has experimentado algo como eso?
Al agregar nuevos elementos a la lista (por ejemplo, con AJAX) :nth-child(2n+1) aparece aplicado a cada nuevo elemento.
Esto sucede solo en dispositivos de 32 bits que ejecutan iOS8 (por ejemplo, iPhone5 pero no iPhone 5s o 6 e incluso no iPhone5 Simulator).
La solución es usar :nth-of-type() hasta que Apple resuelva este problema.
De hecho, nth-child no funciona en IOS8.
Cambiar por nth-of-type hizo el truco por mí.
Está bien soportado https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type
Dicho esto, si no quiere arriesgarse, puede detectar IOS 8 de la siguiente manera.
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'');
}
Me he encontrado con un problema similar y lo estoy agregando aquí en caso de que otros vengan a buscar ya que esta es la única publicación que he encontrado con respecto a los problemas del selector de iOS 8 y CSS.
Mi problema particular es usar nth-child para seleccionar elementos creados por Javascript, y hacemos buen uso de nth-child, que ya no funciona en iOS 8.
nth-of-type funciona, como svassr afirma en su respuesta .
He creado una muestra js (también código al final) que muestra el problema con iOS 8 y document.querySelectAll junto con el selector css nth-child.
Especificando a partir de la información here , y la cita a continuación en particular, creo que están almacenando en caché o preprocesando los selectores.
iOS 8 también es significativamente más rápido que iOS7 en todas las áreas con una mejora 4x en 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>