모바일 사파리의 인라인 SVG 숨기기/표시

Question

아이콘에 인라인 SVG를 사용하려고합니다. 특히 나는 :

<use> 태그로 인라인을 참조하는 꿀꿀

와 함께 SVG 스프라이트에 모든 SVG의의 결합

• 대부분의 일이 잘 작동 들어

this article 람. 내가 JS 그들을 숨기기/표시 할 때 그러나, 나는 아이폰 OS 브라우저에서 문제로 실행했습니다 - http://codepen.io/meanspa/pen/vEGERZ

$('.expand-link').click(function(){ 
    $('.expand-link').toggleClass('clicked'); 
}); 

이 정의가 DOM에있는 SVG를 codepen 것이 그대로 잘 작동하지만 만약 때문에 외부 파일로 이동하고 모바일 Safari에서 사용하려고하면 숨겨진 SVG (.icon-contract)는 클릭 할 때 표시되지 않습니다. 사실,이 작업을 수행하는 유일한 방법은 .icon-contract을 초기에 display:block으로 설정 한 다음 JS에 지연을 설정하여 수백 밀리 초 후에 숨 깁니다.

그래서 그냥 요약, 그것은 모바일 사파리에서 다음과 같습니다

• 외부 파일
• 에서 SVG 년대를 참조 그리고 그 중 일부는 display:none을 경우 때 페이지에 <use> 태그를 사용하는 경우 부하
그런
• 그들은

은 다른 사람이 문제로 실행했습니다 사후 JS로 표시 할 수 없습니다?

감사합니다.

업데이트 : Salmonface가 지적한 것처럼, iOS 7 이상에서만이 사실을 알게되었지만 최신 버전에서는 수정 된 것 같습니다.

사용 :

Answer 1

크리스 Coyier는 this workaround 게시 ", 폭 높이 0 픽셀 : 0 픽셀을;" 대신 "display : none"을 입력하십시오.

지금까지 저에게 큰 도움이되었습니다.