Chrome과 Firefox 간의 CSS3 배경 그라디언트 문제

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). 크롬에서는 두 개의 45도 회색 수직 줄무늬를 보여 주지만 파이어 폭스에서는 두 번째 세로 줄무늬가 아니라 전체 이미지에 피를 흘린다.

저는 인터넷 검색을 위해 시간을 보냈지만 CSS3 생성기에 대한 검색 결과 만 찾았습니다. 원하는 결과가 아닙니다. Firefox가 Safari에서 어떻게 보이는지보기위한 모든 도움이 & Chrome?

Answer 1

문제는 모든 색상 정지에 대한 시작점과 종료점에 대한 Firefox의 주장 때문이었습니다. 최종 및 5 색 중단 점은 그라디언트의 나머지 부분을 투명하게 만들 예정 이었지만 그렇지 않았습니다. 수정 사항이 있습니다.

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%);