iOS11 이미지 렌더링 문제

iOS11이 설치된 iPhone 장치에서 이미지 렌더링에 문제가 있습니다. 내가하고있는 일은 스크롤의 이미지 목록을 lazyloading하는 것이지만 일부 이미지는 랜더링에 실패합니다. 사파리 데스크톱에서 디버깅을 시도했는데 img 태그에는 src가 설정되어 있지만 여전히 모든 영역을 완전히 덮는 일부 작업을 수행 할 때까지는 렌더링되지 않습니다.iOS11 이미지 렌더링 문제

상황은 나는 시도했다 : -

transform3d는 GPU 렌더링을 사용합니다. 불투명도를 사용하면 변경됩니다.
JS를 통해 요소에 어떤 스타일을 추가하면 트리거 리플 로우/다시 그리기

한 의심 : 그것은 PPI (픽셀 당 인치)와 아무것도 할 필요가 않습니다. 현재 150PPI. 72PPI로 줄여야합니까?

나는 문제가 실제로

바이올린 예 정말 죄송 수없는 일이 있지만 링크가있는 것

http://jsfiddle.net/y37eL2hp/4/

전체 화면 : http://fiddle.jshell.net/y37eL2hp/4/show/light/

HTML을

<div ng-app="myapp"> 
    <div ng-controller="Mycontroller"> 
    <div class="my-product" ng-repeat="product in products track by $index"> 
     <div class="my-productimgblk"> 
      <ng-lazy-load-img imgsrc="product" class="lazy-smooth-load my-productimg" elem-type="img" elem-width="309" elem-height="400" load-offset-top="860"></ng-lazy-load-img> 
     </div> 
    </div> 
    </div> 
</div>

위의 예와 동일한 문제가 있는지 확인했습니다. 다시로드 할 때 캐시 지우기

출처

2017-10-23 Zword

방금 문제를 설명하기 위해 jsfiddle을 설정하시기 바랍니다 수 : 자세한 내용은

은이 링크를 참조? –

또한 적어도 일부 img 태그를 둘러싼 요소를 추가 할 수 있습니까? – alphapilgrim

https://tools.pingdom.com을 통해 사이트를 실행하고 '파일 요청'수상작을 화면에 표시해보실 수 있습니까? 로드하는 데 오랜 시간이 걸리는 파일이있는 경우 lazyload를 사용할 때 이미지 렌더링을 차단할 수 있습니다. –

사파리와 관련이 있다고 알려진 알려진 문제가 있으며 모호한 흑백 너비의 사각형 문자가 있다고 가정하고 글꼴이로드되면 lazyload 스크립트가 포함 된 자바 스크립트가 타임 아웃됩니다.

해결 솔루션은 일반적인 즉

font-family: "Your strange font", Arial, Sans-Serif;

혹은 구글 - 글꼴 IOS11 시스템이 곧 패치를 얻을 것이다 희망하지만

를 사용하는 대체 글꼴을 포함하는 것입니다! https://bugs.webkit.org/show_bug.cgi?id=174031

출처

2017-10-28 22:00:12

나는 바이올린 예제를 추가했습니다. 거기에 글꼴을 사용하고 있지는 않지만 여전히 같은 문제가 있습니다. – Zword

iOS11 이미지 렌더링 문제

답변

관련 문제