2017-10-23 3 views
6

Auf IPhone-Geräten mit iOS11 habe ich Probleme mit dem Rendern von Bildern. Was ich mache, ist das LazyLoading einer Liste von Bildern auf Bildlauf, aber einige Bilder werden nicht wiedergegeben. Ich habe versucht, auf dem Safari-Desktop zu debuggen und es zeigt, dass img-Tag src gesetzt hat, aber es wird immer noch nicht gerendert, bis ich eine Aktion mache, die eine Ebene öffnet, die den Bereich komplett abdeckt.iOS11 Bildwiedergabe Probleme

Dinge, die ich habe versucht: -

  1. Transform3D GPU-Rendering zu verwenden. Die Opazität wird ebenfalls geändert.
  2. einige Styling-Element durch JS Hinzufügen auszulösen Reflow/neu zeichnen

One Doubt: Hat es mit PPI (Pixel pro Zoll) etwas zu tun. Derzeit ist es 150PPI. Muss ich es auf 72PPI reduzieren ?.

ich den Link gegeben hätte, wo das Problem tatsächlich passiert ist, aber nicht wirklich

leider

Fiddle Beispiel:

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

Vollbild: 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> 

Ich überprüfte Beispiel oben und es hat dasselbe Problem. Lösche Cache beim Reloaden

+4

Können Sie mir bitte nur einen jsfiddle einrichten, um das Problem veranschaulichen? –

+0

können Sie auch etwas Code hinzufügen, zumindest die Elemente rund um das Img-Tag – alphapilgrim

+0

Könnten Sie versuchen, Ihre Website durch: https://tools.pingdom.com und Bildschirm Shotting der "Dateianfragen" Wasser fallen. Wenn Sie eine Datei laden, deren Ladevorgang zu lange dauert, kann dies dazu führen, dass das Rendering Ihres Bildes blockiert wird. –

Antwort

1

Offenbar gibt es ein bekanntes Problem, von dem man annimmt, dass Safari unverhohlene, mono-breite, quadratische Zeichen annimmt, und sobald die Schriftart geladen ist, wird das Javascript mit dem Lazyload-Skript aktualisiert.

Die Umgehungslösung ist eine Ausweich Schriftart enthält, die

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

oder vielleicht die Verwendung von Google-Fonts

Hoffentlich gemeinsame d.h ist, wird, obwohl die IOS11 System bald gepatcht bekommen !!!

Weitere Informationen finden Sie unter diesem Link: https://bugs.webkit.org/show_bug.cgi?id=174031

+1

Ich habe ein Geige Beispiel hinzugefügt. Ich benutze keine Schriftart, aber immer noch das gleiche Problem – Zword