모바일 사파리 용 SVG가 너무 많습니까? 내 포트폴리오 사이트에 대한 photoswipe 갤러리에서 일하고 있어요

Question

, 휴고를 사용하여 구축. 코드가 가장 깨끗한 것은 아니지만 HarpJS를 사용하여 현재 빌드에서 거대한 업그레이드가되었습니다. 또한 AWS와 GCP에 관해 많은 것을 배웠습니다.

모든 것이 데스크톱에서 작동하며 어제까지 모든 것이 모바일에서 작동했습니다.

모든 축소판 이미지에서 Primitive을 실행하고 2500 자 형태의 SVG를 출력했습니다. 어느 것이 과장 될지는 몰라도 그 정도의 세부적인 시각 효과를 좋아합니다. 회화 적으로 이됩니다.

이제 모바일 사파리에서 페이지가 끊어집니다. Mac에서 모바일 웹 속성을 어리석게 닫습니다. 따라서 어디서 고장이 발생하는지 잘 모르겠습니다.

각 SVG는 약 150kb입니다. SVG를 교체하고 JPG를 다시 사용할 때 페이지 크기가 커지더라도 모든 것이 잘 작동합니다. 게으름로드 플러그인이 작동하지 않는다는 의혹이 있지만 확실하지 않습니다. (나는 밝히는 사용하고 있습니다 - luis-almeida.github.io/unveil합니다.)

가 여기 내 준비 버킷에있는 갤러리 페이지에 대한 링크입니다 : 어떤 도움/조언이 많이 주시면 감사하겠습니다 staging.iammatthias.com

!

Answer 1

의심의 여지없이 메모리 제한 문제입니다. 사파리 모바일은 svg를 렌더링 할 때 메모리 제한으로 알려져 있습니다. 이 문제를 설명 찾을 수 기사입니다 -하지만 엄격하게 한 페이지에 던져 SVGs의 양이 한 번에 모든 렌더링 할 수 제한 아래로 종기 (사이트도 모든 SVGs와 데스크톱 사파리 투쟁). iOS를 사용하는 유일한 방법은 한 번에 서버에서 이미지를 느리게로드하거나이 사용 사례에 대해 SVG를 사용하지 않도록 전환하는 것입니다. 추가 읽기

몇 링크 :

https://www.richdynamix.com/blog/svg-vs-png-in-sprites-an-ios-issue

https://discussions.apple.com/thread/7530327?start=0&tstart=0