Проблемы с градиентом 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):

Отрисовка Chrome исчезает до серого цвета, прежде чем он исчезает до белого (Firefox делает этот способ также и на mac os):

Любые идеи или предложения о том, почему этот нечетный рендеринг может быть?

Ответ 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.