Проблемы с градиентом CSS3 от прозрачного до белого
У меня возникают проблемы с кросс-браузером градиентов CSS3. Это происходит, когда я пытаюсь создать градиент от прозрачного цвета до белого.
Файл, который я использую для тестирования:
http://f.cl.ly/items/0E2C062x3O161b09261i/test.html
Используется CSS:
background-image: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
background-image: -o-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
background-image: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
background-image: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
background-image: -ms-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
Rending выглядит так, как я хочу в Safari 6 (mac):
![Safari 6 Mac OS 10.8]()
Отрисовка Chrome исчезает до серого цвета, прежде чем он исчезает до белого (Firefox делает этот способ также и на mac os):
![Chrome 21 Mac OS 10.8]()
Любые идеи или предложения о том, почему этот нечетный рендеринг может быть?
Ответы
Ответ 1
Я тоже столкнулся с этим. Я не уверен, почему это происходит, но вот то, что я использовал в своих проектах в качестве обходного пути:
background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.001) 0%, #fff 5%, #fff 100%);
Вместо того, чтобы предоставлять Chrome "прозрачное" значение, придайте ему что-то очень, очень близкое к прозрачному. Надеюсь, это поможет!
Изменить: я забыл опубликовать ссылку на мою собственную версию, которая отображается как ожидалось в Chrome 21 (Windows 7).
Ответ 2
CSS, который я вставлял здесь, был неправильным, я редактировал неправильный файл DOH!
Исходный CSS не работает
background-image: linear-gradient(top, transparent 0%, #fff 5%, #fff 100%);
background-image: -o-linear-gradient(top, transparent 0%, #fff 5%, #fff 100%);
background-image: -moz-linear-gradient(top, transparent 0%, #fff 5%, #fff 100%);
background-image: -webkit-linear-gradient(top, transparent 0%, #fff 5%, #fff 100%);
background-image: -ms-linear-gradient(top, transparent 0%, #fff 5%, #fff 100%);
CSS, который исправил проблему
background-image: linear-gradient(top, rgba(255,255,255,0) 0%, #fff 5%, #fff 100%);
background-image: -o-linear-gradient(top, rgba(255,255,255,0) 0%, #fff 5%, #fff 100%);
background-image: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, #fff 5%, #fff 100%);
background-image: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, #fff 5%, #fff 100%);
background-image: -ms-linear-gradient(top, rgba(255,255,255,0) 0%, #fff 5%, #fff 100%);
Проблема прозрачности не является цветом, она черная с 0 альфой, настройка на конкретный белый с 0 альфой устраняет проблему. (спасибо @carisenda)
Это все еще указывает на несогласованность с тем, как поставщики браузеров имеют дело с альфа-прозрачностью в градиентах CSS3.
