3

Compassを使用して線形グラデーションを生成していますが、Safari（バージョン5.1.2 [6534.52.7]）がベンダープレフィックス行をURIであるかのように読み込もうとしていることを示す奇妙なエラーが発生します。変！

コンパスコード： body {@include background-image（linear-gradient（top、＃F7F7F7 0％、#FFFFFF 20％、#cccccc 57％、#dddddd 60％、＃f1f1f1 80％、#FFFFFF 100％））; }

生成されたCSS：

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%);

エラー：-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)

エラー：-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)

エラーにもかかわらず、グラデーションは正しくレンダリングされます。また、エラーの原因とならない他の多数のマルチストップ線形グラデーションがページ全体にあります。これはSafariのバグのようです。これは、でグラデーションが使用されている場合にのみ発生します。いくつかのコードをチェックしてください（Safariを実行している場合は、エラーをライブで参照してください）。

  1. エラーあり（ボディタグのグラデーション）
  2. エラーなし（他の場所でも同じ勾配）

任意のアイデア/ソリューションをいただければ幸いです。

4

1 に答える 1

2

お使いのバージョンの Safari でチェックアウトしてくれた @maxbeatty に感謝します。あなたの投稿により、私はもう少し掘り下げて、すべてのプラグインを無効にしました。原因は Safari AdBlock プラグインであることがわかりました。無効にすると、エラーがなくなりました。

于 2012-02-14T21:58:41.537 に答える