css - para - webkit browsers

Los elementos con la posición "fija" dentro de un iframe no se están renderizando en Safari

Question

Estamos experimentando un problema donde los elementos con position: fixed; dentro de un iframe no se representan correctamente. Solo notamos esto en macOS en Safari.

Así es como debería verse:

Aquí se muestra cómo se ve Safari en macOS (en la carga de la página):

En la carga de la página, las barras superior e inferior no son visibles. Están en el DOM ocupando espacio y pueden hacer clic pero no han sido "renderizados" por el navegador. Como puede ver en la imagen de arriba, las barras aparecen como espacios en blanco.

Si forzamos un rediseño a través de JS, CSS o cambiando el tamaño del navegador, aparecerán las barras. Sin embargo, no estamos buscando una solución para forzar el redibujado. Nuestra pregunta es por qué está sucediendo esto en primer lugar?

Puedes encontrar un ejemplo en vivo aquí:

https://testing.enuvo.ch/user/collect/#collector#/user/overlay

PD: No siempre sucede. A veces, al redimensionar el navegador y volver a intentarlo, se mostrará correctamente. Esperamos que puedas reproducir el problema.

Answer 1

Entonces hay algunas fallas en la position: fixed e z-index Algunos de los navegadores más antiguos lo tratan de forma un poco diferente y se ocupan de los contextos de apilamiento de una manera diferente.

Después de un poco de prueba y error, he logrado que funcione con la hoja de estilo inyectada al agregar:

#ol-main-header,
#cl-footer {
-webkit-transform: translateZ(0);
}

También debería poder eliminar el z-index: 99999 innecesario z-index: 99999 . Espero que ayude.

Answer 2

Intenté tu ejemplo y sí, es realmente extraño. ¿Has pensado en un problema de caché? Safari tiene un comportamiento único para el almacenamiento en memoria caché de iframes, y tal vez su problema provenga de estos.

¿Podría intentar cambiar los encabezados HTTP para que este iframe inhabilite la caché de esta manera?

Cache-Control: no-cache, no-store, must-revalidate Pragma: no-cache Expires: 0 

Aquí hay un ejemplo en PHP:

header(''Cache-Control: no-cache, no-store, must-revalidate''); // HTTP 1.1.
header(''Pragma: no-cache''); // HTTP 1.0.
header(''Expires: 0''); // Proxies

Answer 3

tienes que escribir css en el archivo iframe, no en tu archivo de vista.