#css #gradient
#css #градиент
Вопрос:
Я испытываю проблему с градиентами CSS3 в серверной части, которую я разрабатываю.
Firefox отлично отображает градиент, но Safari создает странные дополнительные линии того же цвета внутри градиента.
Посмотрите изображения для сравнения.
Safari / Firefox
Кто-нибудь может указать мне на причину? Было бы здорово! Спасибо вам, ребята.
Комментарии:
1. Мой 27-дюймовый монитор имеет ширину 1920 пикселей и аппаратную цветовую калибровку. Я не вижу ничего похожего на то, что вы описываете. Возможно, вы можете увеличить масштаб или контрастность для своей демонстрации.
2. Это действительно довольно странно. Попробуйте увеличить масштаб до того места, где размещен текст «Title». За ним вы можете видеть горизонтальные полосы в примере Safari, в то время как пример Firefox обеспечивает плавный градиент.
3. Все масштабирование в мире не заставит появиться то, чего там нет. (Я пытался.) Для моего ЖК-дисплея это проблема цветового контраста, и я не стал с этим возиться после калибровки.
4. Хорошо, я напортачил со своим контрастом… Я все еще не мог заставить его появиться.
5. Хорошо, вот и все: уровни снижены с помощью photoshop
Ответ №1:
Используемые цвета недостаточно контрастны. То, что вы видите, — это браузерная реализация того, что делать, когда поддерживается недостаточная глубина цвета. Safari использует подход, при котором он «угадывает», каковы прерывистые, неподдерживаемые цвета, создавая то, что кажется линиями. Firefox использует другой подход. Он использует то, что называется сглаживанием, когда берется немного одного цвета и накладывается поверх другого цвета, чтобы создать видимость градации там, где недостаточно контраста.
Возможные решения — увеличить контрастность или создать градиент в Photoshop или что-то еще и применить сглаживание вручную.
Комментарии:
1. О, это довольно интересно. Наряду с другими проблемами CSS3, с которыми я сталкиваюсь в Safari, я нахожу недоумение в том, что Apple не может идти в ногу с тем, что предлагает Firefox. В любом случае, поскольку я должен иметь возможность растягивать эти контейнеры, я не могу создать изображения: / Нет ли какого-либо способа сообщить Safari, как вести себя, когда дело доходит до рендеринга градиентов?
2. @user1018787 Я на самом деле понятия не имею, но я предполагаю, что не учитывая, что стандарт w3c этого не предусматривает. Но пока вы используете css3, вы могли бы использовать фоновое изображение, а свойство background-size установить для него значение 100%.
3. @user1018787, проблема вовсе не в том, что «Safari не отстает от Firefox» . Каждый делает это по-разному без набора определенных стандартов, так что кто скажет, какой метод правильный? Возможно, градиенты Safari выглядят лучше, чем Firefox, при другом наборе обстоятельств.
4. @Sparky672 нет … нет, это не так…. просто … нет. 😛 Хотя, если серьезно, вы правы. Это зависит от реализации браузера. И, следовательно, заведомо не хватает стандартов.
5. Действительно, в принципе я бы не стал высказывать такого мнения, но у меня также возникли проблемы с обрезкой радиуса границы (которые я не смог решить с помощью свойства background-clipping). Мы все знаем, что это головная боль, что браузеры должны так сильно отличаться друг от друга. Что касается рассматриваемой проблемы, я работаю над серверной частью, поэтому я могу позволить себе роскошь заставить клиента использовать firefox (что кажется совершенно неуместным, учитывая тот факт, что речь идет только о градиентах). Проблема в том, что Firefox хуже работает с Javascript и анимацией перехода CSS3 : (