animation - keyframes - Webkit que no respeta el desbordamiento: oculto con el radio del borde
keyframes en html (8)
Al igual que un aviso, esta solución solo funcionó si aplicaba la máscara en un contenedor con radio de borde, pero sin borde. Al final terminé con algo como esto:
<div style="border-radius: 15px; border: 1px solid red;">
<div style="border-radius: 15px; overflow: hidden; -webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);">
<span style="position: relative; left; -20px;">Some stuff that overflows.</span>
</div>
</div>
Con un borde en la división interna, el recorte no era perfecto.
Totalmente extraño.
Tengo una hermosa animación de alerta roja de Star Trek usando CSS3. Uno de mis elementos principales tiene un border-radius junto con overflow:hidden para que cualquier contenido se recorte a la forma del radio de borde.
Todo esto funciona bien en Firefox pero los navegadores Webkit dejan algunos elementos secundarios colgando fuera del área recortada.
Aquí está mi código:
http://jsfiddle.net/doublewombat/EqK6R/embedded/result/
El div con el nombre de clase curvedEdges tiene el border-radius y el overflow:hidden . Sin embargo, los bloques a la izquierda y derecha del texto "Alerta" cuelgan fuera de este radio, a pesar de que son elementos secundarios de los curvedEdges . O bien, en inglés simple, los bordes izquierdo y derecho de la animación deben ser ligeramente curvos (como en Firefox), no directamente muertos.
Entonces, ¿esto es un error en Webkit, o tengo algo mal?
Aquí está en YouTube si no tiene un navegador Webkit a mano ...
En primer lugar, ¡qué demo genial!
Eché un vistazo alrededor y parece un problema que no está teniendo. La segunda respuesta al problema de otra persona lo solucionó , aunque esto no funciona para un safari. La solución es utilizar el enmascaramiento:
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
La respuesta aceptada a esa misma pregunta tiene otra solución, que creo que realmente podría ayudarte, pero parece que no pude obtener la combinación correcta de elementos y radio de borde.
Encontré otra solución posible para este error, utilizando la ruta de acceso del clip CSS3, pero solo funciona en versiones recientes de webkit (parece funcionar en Chrome 24, pero no en Safari 6.0.2). Lo siguiente recortará un círculo alrededor del elemento:
-webkit-clip-path: circle(50%, 50%, 100%);
Esperemos que esto sea implementado por más navegadores pronto! Parece que esta característica podría tener muchas aplicaciones geniales. Aquí hay una publicación de blog relevante: http://blog.romanliutikov.com/coding/css-clip-path-landed-in-webkit/ .
Parece que es un problema con la composición de GPU / hardware. transform: translateZ(0); debería solucionar el problema también. Para obtener más información sobre esto, lea http://aerotwist.com/blog/on-translate3d-and-layer-creation-hacks/
-webkit-transform: translateZ(0);
transform: translateZ(0);
He incluido prefijos de proveedores, pero puede eliminarlos si lo desea.
Parece que es una solución de trabajo mixta:
.wrap {
-webkit-transform: translateZ(0);
-webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
}
Parece ser un problema del navegador como se informa en: https://code.google.com/p/chromium/issues/detail?id=157218
Básicamente, cuando aplica animación a un elemento, el navegador lo manejará en la GPU (Unidad de Procesamiento de Gráficos) por razones de rendimiento, mientras que el resto lo maneja la CPU. Eso termina renderizando la animación sobre la máscara.
Como solución alternativa, puede intentar agregar una propiedad de transform imperceptible, que también activará el manejo de GPU para el elemento de máscara, promoviéndolo al mismo nivel de la animación:
#redAlert .curvedEdge {
-webkit-transform: rotate(0.000001deg);
}
Supongo que puede variar según la versión del navegador, pero también se ha informado que estos otros valores activan el manejo de la GPU: rotate(0) , translateZ(0)
Podría colocar un div absoluto posicionado sobre él con un radio de borde y un borde negro grueso, bloqueará las partes que desea que también estén ocultas.
Hice una demostración para otra pregunta sobre un problema similar en FF3.6: http://jsfiddle.net/vfp3v/15/
radio de la frontera desbordamiento: oculto, y el texto no se recorta
Yo había estado tratando de hacer lo mismo, y estaba usando el radio de borde para enmascarar elementos a un círculo.
Pude usar el enmascaramiento y un degradado radial para lograr el efecto deseado en Safari 6.0.3 (con transiciones en posición y tamaño).
Aquí está la única línea de código que agregué al elemento contenedor (enmascaramiento):
-webkit-mask-image: -webkit-radial-gradient(circle, white, black);
Pensé que tendría que usar paradas de color duro, de la siguiente manera, para obtener el borde duro:
-webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
Sin embargo, funciona de la misma manera sin (tal vez alguien pueda ilustrarnos sobre por qué). El recorte no es tan suave como con el radio de borde, pero supera a la diapositiva de la imagen que excede impredeciblemente los límites.
Es posible que deba ajustar esto para usarlo con versiones anteriores de Safari / Chrome, etc., no lo he probado en diferentes versiones (también conocido como YMMV).