La etiqueta de video en Safari 10 sube después de unos segundos

después de unos segundos de reproducir el video, el video sube un 50% y muestra los controles y solo la mitad inferior del video.

este problema solo ocurre en Safari 10, lo probé en Safari 9 (y otros navegadores) y funciona bien, he reproducido el problema en https://jsfiddle.net/antonino_R/d9tf0va3/4/

this is a title

this is some text

y este es el CSS (estoy tratando de tener título y subtítulo en el medio de la pantalla)

 .wrapper { overflow: hidden; color: #FFF; border-top: 6px solid #9BA800; background-color: #404040; background: linear-gradient(145deg, #404040 0%, #111 100%); position: relative; z-index: 0; } .wrapper-video { position: absolute; z-index: 1; top: 50%; left: 0; right: 0; bottom: 0; } .wrapper-video video { width: 100%; -webkit-filter: opacity(0.6) contrast(1.5); filter: opacity(0.6) contrast(1.5); transform: translateY(-50%); -webkit-transform: translateY(-50%); } .site-centered { max-width: 78em; margin: 0 auto; padding: 0 1.5em; } .wrapper .entry-header { margin: 7.5em 0 3.5em 0; font-weight: 300; line-height: 1.5; overflow: auto; z-index: 10; position: relative; overflow: visible; margin-bottom: 4.5em; } 

parece que safari ha cambiado la forma en que trata las tags de video

Encontré el problema: básicamente, tener el video en el medio ocultaba los controles, y el atributo “controles” en la etiqueta html obligaba al video a tener los controles, safari obliga a los controles a mostrarse, por eso después de unos pocos segundos el video se empuja a la cima, solo para mostrar los controles

solo eliminar el atributo “controles” corrige el problema:

(aquí el jsFiddle: https://jsfiddle.net/antonino_R/d9tf0va3/14/ )

 

this is a title

this is some text

y el CSS es más limpio:

 .wrapper { overflow: hidden; color: #FFF; border-top: 6px solid #9BA800; background-color: #404040; background: linear-gradient(145deg, #404040 0%, #111 100%); position: relative; z-index: 0; } .wrapper-video { position: absolute; z-index: 1; top: 0; left: 0; right: 0; bottom: 0; } .wrapper-video video { width: 100%; -webkit-filter: opacity(0.6) contrast(1.5); filter: opacity(0.6) contrast(1.5); transform: translateY(-10%); -webkit-transform: translateY(-10%); } .site-centered { max-width: 78em; margin: 0 auto; padding: 0 1.5em; } .wrapper .entry-header { margin: 7.5em 0 3.5em 0; font-weight: 300; line-height: 1.5; overflow: auto; z-index: 10; position: relative; overflow: visible; margin-bottom: 4.5em; }