safari - por - reemplazar texto con css

No se puede desplazar dentro de un div después de aplicar-webkit-transform en Safari

Question

Estoy construyendo un menú de diapositivas.

El menú es largo y necesito poder desplazarme hacia adentro, así que he configurado overflow-y: scroll sobre él.

Estoy usando -webkit-transform (y variantes en otros navegadores) como la propiedad de transición.

Ahora no puedo desplazarme dentro de la div, usando la rueda de desplazamiento cuando en la parte superior de la div se desplaza toda la página.

Si cambio el comportamiento del menú y hago la transición de la propiedad correcta (configurando el menú a la derecha: -320px y animándolo de nuevo a la derecha: 0), el desplazamiento funciona.

Esta falla solo ocurre en Safari, funciona bien en Chrome y otros navegadores. También funciona en iOS.

¿Alguien sabe una solución? ¿Alguien ha experimentado este problema antes? Parece que no puedo encontrar ninguna información al respecto. Gracias.

Answer 1

Tuve el mismo problema con la diferencia de que uso una animation lugar de una transition y overflow: auto lugar de overflow: scroll .

Esto me solucionó el problema ( el es el elemento DOM al que se aplica la animación):

function fixSafariScrolling(event) {
    event.target.style.overflowY = ''hidden'';
    setTimeout(function () { event.target.style.overflowY = ''auto''; });
}

el.addEventListener(''webkitAnimationEnd'', fixSafariScrolling);