log - Desalineación de divisiones individuales/subpíxel en divs en ipad y iphone

mobile safari remote inspector

Question

Tengo la siguiente situación y necesito ayuda ...

1. Dos divs, del mismo tamaño, misma ubicación, uno encima del otro
2. Todo funciona como se espera en los navegadores de escritorio
3. En el iphone / ipad aparece una línea tenue alrededor del borde de los divs
4. Esta línea tenue no siempre está en los cuatro bordes. Cambia dependiendo de la ubicación de los divs. Parece estar sucediendo como resultado de que los dos divs no se alinean correctamente, pero de acuerdo con su configuración de estilo, son de tamaño y ubicación idénticos.

Puede ver los resultados aquí: http://www.thoughtartistry.com

¿Algunas ideas?

Answer 1

¿Algunas ideas?

Si solo estás pidiendo ideas, tengo algunas. Si está buscando una solución, no creo que exista una.

Estoy viendo lo mismo con mis sitios web. El problema desaparece cuando haces un acercamiento. Creo que es simplemente un problema con la forma en que Mobile Safari renderiza las divisiones e imágenes a escala reducida y realmente no creo que haya nada que podamos hacer al respecto.

Digamos que su sitio / diseño tiene 900 píxeles de ancho. Tienes un div 900 px de ancho en la fila n. ° 1 encima de tres divs en la fila n. ° 2, cada uno de 300 px de ancho. Escalado al 100% en una PC de escritorio, todo se ve perfecto. Sin embargo, para iOS, el sitio se ha reducido a 320 px de ancho. El div de 900 px se reduce un 64,44%. Ahora, cuando escalas cada uno de los 300 x div en un 64.44%, obtienes 106.68 px cada uno. No puede tener una fracción de píxel, así que digamos que se redondean a 107 px cada uno. Tres de esos divs en una fila totalizan 321 píxeles; o 1 píxel más que el div más grande sobre ellos.

Mi explicación es una simplificación excesiva, ya que aumentar el zoom parece reducir o eliminar el problema, incluso cuando aún tienes menos de una relación de 1 a 1 píxel. Asumiré que cualquier algoritmo iOS que esté corrigiendo errores de redondeo simplemente hace un mejor trabajo cuando la imagen general está más cerca del tamaño real (más zoom).

EDITAR:

Veo este problema con un divisor de 900 px de ancho (altura automática) que contiene un corte de fondo repetitivo en Y de 900 px de ancho sobre otro div (altura fija) que contiene una imagen de fondo de 900 px de ancho. Mi explicación de los errores de redondeo no parece explicar directamente esta observación, aunque sigo creyendo que los algoritmos de escalado de iOS son la culpa.

Answer 2

Depende totalmente de la situación de cada uno, pero en nuestro caso usamos los márgenes negativos como propone este hilo o una sombra de cuadro, ya que el outline solo se aplica a todos los bordes, es decir. outline-bottom no existe.

/*
 * Prevent faint lines between elements.
 * @link http://.com/questions/5832869
 */
box-shadow: 0 1px 0 red;

Answer 3

El problema no es solo con los divs que coinciden, sino también con los sprites de la imagen.

Seguí el consejo en este hilo de establecer la escala de vista inicial a 1.0. El error sub-pixel desapareció, pero luego probé mi sitio web en otros dispositivos, como Android, y me di cuenta de que una página de tamaño completo es molesta, ya que los usuarios tienen que volver a escalar cada vez que se carga. Así que preferí desactivar la báscula y esperar hasta que Apple la solucione. Entonces, un día, estaba pensando en cómo resolver el problema con los márgenes de la página, y llegué a esta solución simple en CSS:

html {
  min-width: 1024px;
}

Los dispositivos con esta resolución, como iPad en posición horizontal, configurarán la escala del documento en 1.0. En mi caso, esta es una solución suficiente, ya que puedo demostrar que la página funciona correctamente, y el error de subpíxel está en Safari / iOS, que se resolverá en el futuro con suerte.

Answer 4

Intentaba jugar con las opciones de meta / viewport, específicamente estableciendo la escala inicial en 1.0 y deshabilitando el zoom del usuario.

http://developer.apple.com/library/safari/ipad/#documentation/appleapplications/reference/SafariHTMLRef/Articles/MetaTags.html

Answer 5

Quite "clear: both" (si hay) de div debajo del espacio.

Answer 6

También resolví el problema de brecha subpixel de iOS (en un sitio de pantalla completa) usando overflow-x: hidden; para detener el desplazamiento lateral y la escala del punto de vista para detener el acercamiento del tono. También tuve divs del titular establecidos en ancho: 101%; y todos los elementos / divisiones de imagen dentro del conjunto flotan: izquierda ;. Esto significa que las brechas de subpíxeles están todas en el sitio de la izquierda, pero que se ven fuera de la vista por el conjunto div del titular al 101% de ancho.

Answer 7

También tuve que resolver esto. Si está usando Div''s para definir secciones solo entonces.

//background.css
.background-color {
  background-color: blue;
}
.background-color div {
  background-color: inherit;
}

Answer 8

Tuve un problema similar en un proyecto reciente donde tenía máscaras de imagen de fondo con diferentes colores de fondo para colorear los iconos resultantes en Safari móvil. El problema era que cuando Safari reducía la página, había una línea del color de fondo que se mostraba alrededor de la imagen, aunque debería haber sido enmascarada. Nunca encontré una manera de evitar esa filtración del color de fondo cuando la página se reduce. Es claramente un error en los algoritmos de Safari móvil que recalculan el fondo y la máscara. Encontré una solución alternativa: puse un contorno en el elemento con el mismo color que el fondo del elemento principal del elemento. El contorno está fuera del elemento y, por lo tanto, enmascara la pieza que se desangra. Si el elemento primario de su elemento tiene un fondo de patrón que es drástico, esto no funcionará tan bien, pero si es un color sólido, funcionará perfectamente.

Answer 9

Un margen negativo es la única forma que encontré para evitar esto.

Por ejemplo, si tiene una brecha horizontal débil entre 2 divs, agregar un margen superior de -1px al segundo div hará que se superponga ligeramente y la brecha no volverá a aparecer a medida que la página se escala.

Algunas situaciones (como sprites de imágenes o patrones de repetición) pueden necesitar un poco más de ajuste, pero la idea general es la misma. Para un sprite, asegúrese de que no haya un gran cambio de color dentro de 1 píxel del borde de recorte. El sangrado nunca es más de 1 píxel, por lo que un ajuste de 1 píxel es suficiente.