Error de renderizado de Safari con CSS “clip”

Tengo el siguiente problema con Safari: http://cl.ly/ZlJ8

LiveDemo: http://drpdev.de/labs/example.html

Código fuente completo: http://jsfiddle.net/uqsghon7/

...
... (multiple times with different contents in .side)

y estilo:

 .side { height: auto; padding-left: 50px; margin: auto; position: fixed; top: 50%; left: 0; bottom: 0; width: 350px; ... } .row { ... position: relative; overflow: hidden; } .rowcontainer { position:absolute; top: 0; left: 0; right: 0; bottom: 0; padding: 0; margin: 0; clip: rect(0, auto, auto, 0); overflow:hidden; } 

Funciona perfectamente en Chrome y Firefox. Antes traté de lograrlo solo con la posición fija dentro del div (con posición relativa) (sin segundo contenedor) y el desbordamiento oculto y funcionó en todos los navegadores, pero no en Firefox, así que tuve que hacer esta solución con css-clip … Es en realidad también funciona en Safari, pero parece que el motor de render de Safari no está actualizando la vista cuando se desplaza …

¿Algunas ideas?

Muy interesante.

Creo que encontré la respuesta, pero se trata de un hackeo solo para webkit. Eso me molesta un poco, pero espero que esto todavía se ajuste a la factura.

Rebuscando por problemas de recorte / renderización, me topé con una pregunta de SO con respecto a la posición de fondo y los elementos de posición fija, la respuesta mencionaba -webkit-mask-image como una alternativa de clip: auto -webkit-mask-image solo para clip: auto .

También funciona para usted: solo agregar el siguiente CSS hace feliz a Safari:

 @media screen and (-webkit-min-device-pixel-ratio:0) { .rowcontainer { clip: auto; -webkit-mask-image: -webkit-linear-gradient(top, #ffffff 0%,#ffffff 100%) } } 

Aquí hay un violín y un modelo de trabajo .

Confieso que realmente no entiendo por qué funciona. Pero también funciona en Chrome y Firefox.

IE9, sin embargo, no está realmente contento con esto. IE11 muestra el contenido de los divs pero omite la mayoría de sus antecedentes. Vale la pena considerarlo…