Safari에서 CSS3 그래디언트 문제

Question

CSS3 그래디언트를 사용하여 스타 버스트 효과를 복제하려고했습니다. 많이 들키고 난 후에, 나는 그것을 이해했다, 단지 그것을 사파리에서 시험해보고, 그것에 열중하게한다. 사파리가 Chrome이 270deg 등으로 렌더링하는 180deg를 사용하는 것과 같습니다. http://codepen.io/syren/pen/Ahkrv이

당신이 가진 모든 입력이 매우 도움이 될 것입니다 :

여기에 코드입니다. 미리 감사드립니다!

업데이트 :이 튜토리얼의 내용 : http://camenischcreative.com/blog/2011-04-26에서 Chrome에서 동일한 버그가 발생했지만 Safari에서 작업 한 것으로 나타났습니다. 90도에서 90도를 사용하는 것으로 나타났습니다. 그래서 -webkit-gradient-prefixed gradient를 그 범위에서 다시 작성했는데 이제는 작동합니다. Chrome은 선형 그래디언트를 사용하므로 180deg ~ 360deg 그래디언트를 사용하며 작동합니다.

문제가있는 접두사가있는 그라디언트를 주석 처리하여 문제를 해결하고 주석 처리를 제거했습니다.

내 문제가 해결되었지만 다른 사람이이 문제를 겪고 있는데 왜 그렇게 생각하는지 궁금합니다.

Answer 1

"오버레이"의 이유는 모든 공급 업체 특정 그라데이션 속성을 포함하지 않았기 때문입니다.

Firefox 3.6 이상, Old Webkit (Safari 4 이상, Chrome), Opera 11.1 이상에 대한 공급 업체 접두사 CSS 그래디언트가 없습니다. 당신도 그 브라우저를 지원하려면

, 당신은 이런 식으로 뭔가를해야 : 당신은그라데이션 웹킷 선형 및 선형 gradinet를 사용하는

/* FF3.6+ */ background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); 
/* Chrome,Safari4+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0))); 
/* Chrome10+,Safari5.1+ */ background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); 
/* Opera 11.10+ */ background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); 
/* IE10+ */ background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); 
/* W3C */ background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); 

.