Проблема с CSS3 фоном градиента между Chrome и Firefox

Question

background: -moz-linear-gradient(45deg, rgba(92,92,92,0.95) 0%,rgba(92,92,92,0.65) 45%,rgba(0,0,0,0.25) 45%,rgba(0,0,0,0.25) 47%,rgba(0,0,0,0) 47%); 
background: -webkit-linear-gradient(45deg, rgba(92,92,92,0.95) 0%,rgba(92,92,92,0.65) 45%,rgba(0,0,0,0.25) 45%,rgba(0,0,0,0.25) 47%,rgba(0,0,0,0) 47%); 

Эти две линии идентичны, но дают разные результаты. Вы можете посмотреть, что здесь происходит (http://www.eprize.com/what-we-do/#mobile). В Chrome представлены две серые вертикальные полосы на 45 градусов, тогда как в Firefox один из них пропускает все изображение целиком, а не вторую вертикальную полосу.

Я потратил некоторое время на поиск в Google, но нашел только результаты для генераторов CSS3, чего я не хочу. Любая помощь в получении Firefox выглядит так, как это выглядит в Safari & Chrome?

Answer 1

Проблема была в том, что Firefox настойчиво в начальной и конечной точке для всех цветовых остановок. Финальная и пятая цветовая остановка должны были сделать остальную часть градиента прозрачной, но этого не произошло. Вот исправление.

background: -moz-linear-gradient(45deg, rgba(92, 92, 92, 0.95) 0%, rgba(92, 92, 92, 0.65) 45%, rgba(0, 0, 0, 0.25) 45%, rgba(0, 0, 0, 0.25) 47%, rgba(0, 0, 0, 0) 47%), rgba(0, 0, 0, 0) 100%);