Fallo de IE10 con Animation y @keyframes css en @media queries

Descripción del fallo de IE10 al concurrir una animación Css con las @keyframes declaradas dentro de reglas @media queries y cómo solucionarlo.

Fallo de IE10 con Animation y @keyframes css en @media queries

Por Kseso ✎ 5

Fallo de IE10 con Animation css en @media queriesPlanteando el escenario: tengamos una animación Css construida con sus correspondientes @keyframes y por aquello del las particularidades del proyecto sólo sea necesario emplearla en un determinado tamaño de pantalla.

Para esto último, discriminar por viewport, tenemos disponibles y usamos la @media queries correspondientes para poner dentro de ella tanto la declaración 'animation' con su valor como la regla '@keyframe'.

Y aquí surge la sorpresa, desagradable y frustante. Mientras en cualquier otro navegador (cuya versión de soporte a éstas) la animación funciona perfectamente bien, en IE10 falla la animación Css. Recuerda que IE10 sí soporta las 'animation', @keyframes y @medias queries de Css.

Pongamos en código lo anterior para que puedas hacer tus pruebas y si consideras oportuno dejar tus impresiones en un comentario.

html {background:#444;} @media only screen and (min-width: 600px) { html {animation: colorize 5s infinite;} @keyframes colorize { 0% {background: #FF7361;} 100% {background: #16a085;} }/*fin de la Keyframes*/ }/*fin de la @media query*/

Sencillo: mostramos el fondo del html en color '#444' en los viewports menores de 600px y el los mayores aplicamos la animación 'colorize' que alterna entre '#FF7361' y '#16a085'

Puedes verlo en el pen que incluyo justo debajo

See the Pen IFKmB by Kseso (@Kseso) on CodePen

Ver Demo

Solucción al fallo de IE10 con animation en @media queries

En los distintos sitios de Micro$oft no he podido encontrar nada al respecto.

Buscando información sobre este fallo de IE10 cuando concurren juntas encontré este hilo en los foros de Css-tricks.

En él, el usuario ToxicFire propone como solución a este bug de IE10 escribir la regla '@keyframes' fuera de toda regla @media query, incluyendo sólo en la @media correspondiente la declaración 'animation: valor'.

Así, tomando como ejemplo el código anterior, el css para que funcione en IE10 la animación en función de las @media queries oportunas quedaría así:

html {background:#444;} @keyframes colorize { 0% {background: #FF7361;} 100% {background: #16a085;} } @media only screen and (min-width: 600px) { html {animation: colorize 5s infinite;} }

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso

Comentarios: 5

  1. Este IE es lo peor que le puso pasar a la web, mientras los otros navegadores se esfuerzan para captar todas las instrucciones CSS3 este hace quedar mal, lo peor que el cliente una mucho el IE y comienza a quejarse porque no se ve igual que en otros navegadores. Realemente estresante.

    ResponderEliminar
  2. Leo el principio del artículo, abro la demo en IE10, digo:

    Voy a probar a poner los keyframes fuera... FUNCIONA! SOY UN GENIO!

    Acabo de leer el artículo... :(

    Bromas aparte, esto no es un bug (al menos no como tal), ya que la w3c no especifica cómo deben de interpretarse los keyframes en esta situación

    Es más, el comportamiento más lógico es el de IE (desde el punto de vista de cómo funciona el parser de CSS): teniendo en cuenta que el nombre de la animación afecta a todo el documento tiene sentido que no se deje declarar en un condicional.

    Tengo curiosidad por ver cómo se coportan los otros navegadores cuando redeclaras una animación dentro de una media query, voy a trastear un poco y trataré de volver con algo interesante.

    ResponderEliminar
    Respuestas
    1. Hey! Emilio ¡Qué bueno verte por acá.

      De lógico tiene bien poco.
      Date cuenta que estamos ante una regla de reglas (@media queries) susceptible de contener en ella otras reglas css. Y nada prohíbe en las especificaciones del consorcio (hasta donde yo recuerdo) alojar otra regla de reglas (la @keyframe) dentro así como la propiedad 'animation'. Ambas sólo se desarrollarán en esas condiciones marcadas por la @media.
      Imagina que en vez de ser sólo un par 'animation + su keyframes' para una un determinado viewport fuesen distintas animaciones para distintas @medias.

      Tengo pendiente hacer una comprobación a mayores: añadir alguna otra regla dentro de la media query y tras los keyframes y ver qué pasa en IE.

      El comportamiento del resto de navegadores con las keyframes dentro de la media query puedes verla en el pen del post: Chrome, FF, Opera y Safari en vi$ta sin problemas.

      Un saludo y gracias por tu punto de vista.

      Eliminar
    2. Tras hacer un pequeño test (http://codepen.io/ecoal95/pen/bhtyk) los otros navegadores sobreescriben la regla se cumpla o no la media query.

      Viene a ser el mismo comportamiento que IE (tratarlo como global), pero admitiendo que se sobreescriban en cualquier parte del documento.

      Sigo pensando que IE lleva razón en esto...

      Con regla de reglas te refieres a reglas condicionales? o a todas las at-rules? Porque la inclusión de @keyframes y @font-face dentro de la categoría de reglas condicionales está siendo muy discutida y actualmente en peligro, y no todas las at-rules se pueden incluir en una media query (por ejemplo @import o @charset)

      Eliminar
  3. Sí, con el término "regla de reglas" me refiero a las at-rules. Pero en esta conversación esècíficamente a las @media queries.

    Discutido qué puede contener las @media claro que lo está. El documento que desarrolla este aspecto está con estatus "Editor´s draft": CSS Syntax Module Level 3
    El anterior es de 2003 y la única at-rule que recoge el @media type.

    Pero en peligro la inclusión de keyframes, fontface y otras, no lo está. De hecho figura lo siguiente, en el apartado correspondiente a las @media (final del punto 7.1)

    7.1 Defining Block Contents: the , , and productions
    Example 14
    For example, the @media rule accepts anything that can be placed in a stylesheet, except more @media rules. As such, its grammar is:

    @media <media-query-list> { <stylesheet> }

    It additionally defines a restriction that the can not contain @media rules, which causes them to be dropped from the outer rule’s value if they appear.


    Si no he entendido mal, excepto otras reglas @media, las medias queries pueden contener cualquier contenido excepto aquél que expresamente lo impida por él mismo.
    Y las dos reglas que mencionas explicitan muy claro el lugar y cómo deben aparecer en la hoja de estilos:
    @charset si la hay sólo debe haber una y estar al inicio de todo de la hoja de estilo. Ni comentarios pueden precederla.


    Con @import ocurre igual. Si entre <style> y @import hay algo ya no se importa.

    Pero son dos excepciones.

    Un saludo, Emilio.

    N.B.: cómo me gustan estos intercambios.

    ResponderEliminar

EsCss RSS del Blog RSSS Comentarios Humans.txt ᛯ Diseno por Kseso SiteMap