-webkit-linear -dient вызывает ошибку 400 (неверный запрос) в Safari - PullRequest
Новая
       45

-webkit-linear -dient вызывает ошибку 400 (неверный запрос) в Safari

3 голосов
/ 14 февраля 2012

Я использую Compass для генерации линейных градиентов, но получаю странную ошибку, указывающую, что Safari (версия 5.1.2 [6534.52.7]) пытается загрузить строку с префиксом поставщика, как если бы это был URI.Странно!

Код компаса: body {@include background-image (linear-Gradient (верх, # 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-градиент () 

-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. Нетошибка (тот же градиент в другом месте)

Любые идеи / решения будут с благодарностью.

1 Ответ

2 голосов
/ 15 февраля 2012

Спасибо @maxbeatty за проверку вашей версии Safari.Ваш пост заставил меня покопаться немного дальше и отключить все плагины.Я обнаружил, что виновником был плагин Safari AdBlock.Отключение заставило ошибку исчезнуть.

...