-webkit-linear-gradient provoque une erreur 400 (mauvaise requête) dans Safari

Question

J'utilise Compass pour générer des dégradés linéaires, mais je reçois une erreur étrange indiquant que Safari (version 5.1.2 [6534.52.7]) essaie de charger la ligne préfixée par le fournisseur comme s'il s'agissait d'un URI. Bizarre !

Le code Compass : b @include background-image(linear-gradient(top, #F7F7F7 0%, #FFFFFF 20%, #cccccc 57%, #dddddd 60%, #f1f1f1 80%, #FFFFFF 100%)) ; }

CSS généré :

background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f7f7f7), color-stop(20%, #ffffff), color-stop(57%, #cccccc), color-stop(60%, #dddddd), color-stop(80%, #f1f1f1), color-stop(100%, #ffffff));
background-image: -webkit-linear-gradient(top, #f7f7f7 0%, #ffffff 20%, #cccccc 57%, #dddddd 60%, #f1f1f1 80%, #ffffff 100%);
background-image: -moz-linear-gradient(top, #f7f7f7 0%, #ffffff 20%, #cccccc 57%, #dddddd 60%, #f1f1f1 80%, #ffffff 100%);
background-image: -o-linear-gradient(top, #f7f7f7 0%, #ffffff 20%, #cccccc 57%, #dddddd 60%, #f1f1f1 80%, #ffffff 100%);
background-image: -ms-linear-gradient(top, #f7f7f7 0%, #ffffff 20%, #cccccc 57%, #dddddd 60%, #f1f1f1 80%, #ffffff 100%);
background-image: linear-gradient(top, #f7f7f7 0%, #ffffff 20%, #cccccc 57%, #dddddd 60%, #f1f1f1 80%, #ffffff 100%);

Erreur : -webkit-linear-gradient

-webkit-linear-gradient(top,%20rgb(247,%20247,%20247)%200%,%20rgb(255,%20255,%20255)%2020%,%20rgb(204,%20204,%20204)%2057%,%20rgb(221,%20221,%20221)%2060%,%20rgb(241,%20241,%20241)%2080%,%20rgb(255,%20255,%20255)%20100%)
GET http://localhost:8888/-webkit-linear-gradient(top,%20rgb(247,%20247,%20247)%200%,%20rgb(255,%20255,%20255)%2020%,%20rgb(204,%20204,%20204)%2057%,%20rgb(221,%20221,%20221)%2060%,%20rgb(241,%20241,%20241)%2080%,%20rgb(255,%20255,%20255)%20100%) 400 (Bad Request)

Erreur : -webkit-gradient()

-webkit-gradient(linear,%2050%%200%,%2050%%20100%,%20from(rgb(247,%20247,%20247)),%20color-stop(0.2,%20rgb(255,%20255,%20255)),%20color-stop(0.57,%20rgb(204,%20204,%20204)),%20color-stop(0.6,%20rgb(221,%20221,%20221)),%20color-stop(0.8,%20rgb(241,%20241,%20241)),%20to(rgb(255,%20255,%20255)))
GET http://localhost:8888/-webkit-gradient(linear,%2050%%200%,%2050%%20100%,%20from(rgb(247,%20247,%20247)),%20color-stop(0.2,%20rgb(255,%20255,%20255)),%20color-stop(0.57,%20rgb(204,%20204,%20204)),%20color-stop(0.6,%20rgb(221,%20221,%20221)),%20color-stop(0.8,%20rgb(241,%20241,%20241)),%20to(rgb(255,%20255,%20255))) 400 (Bad Request)

Malgré l'erreur, le dégradé est rendu correctement. Il existe également de nombreux autres dégradés linéaires à arrêts multiples dans la page qui ne provoquent pas d'erreur. Il semble qu'il s'agisse d'un bogue de Safari - il ne se produit que lorsque le dégradé est utilisé dans la page. Vérifiez le code (voyez l'erreur en direct si vous utilisez Safari) :

1. Avec erreur (gradient dans la balise Body)
2. Pas d'erreur (même gradient ailleurs)

Toute idée/solution serait grandement appréciée.

Answer 1

Merci @maxbeatty de l'avoir vérifié sur votre version de Safari. Votre post m'a conduit à creuser un peu plus loin, et à désactiver tous les plugins. J'ai découvert que le coupable était le plugin Safari AdBlock. Sa désactivation a fait disparaître l'erreur.