iOS11画像レンダリングの問題

Question

iOS11を搭載したiPhoneデバイスでは、画像のレンダリングに問題があります。私がやっていることは、スクロールで画像の一覧をlazyloadingすることですが、一部の画像はレンダリングに失敗します。 Safariのデスクトップでデバッグを試みましたが、imgタグにはsrcが設定されていますが、領域を完全にカバーするレイヤーを開く何らかのアクションを実行するまでレンダリングされません。私が試した

もの： - GPUレンダリングを使用する

1. transform3d。不透明度を使用すると、同様に変更されます。

ワン・ダウト再描画/リフローをトリガするために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> 

上記の例とその問題点を確認しました。再ロード時にキャッシュをクリアする

Answer 1

Safariに関連すると思われる既知の問題があると思われますが、一度フォントが読み込まれると、lazyloadスクリプトを含むJavaScriptがタイムアウトします。

回避策ソリューションは、共通すなわち

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

またはおそらくグーグル・フォントIOS11システムはすぐにパッチを当ててしまいますうまくいけばけれども

を使用している代替フォントを含めることです！ https://bugs.webkit.org/show_bug.cgi?id=174031