Hintergrundbild verschwommen beim Skalieren auf iPad und iPhone

8

Ich erstelle eine Web-App, in der Benutzer bestimmte 100x100px Hintergrundbilder zoomen können.

Wenn Sie das Bild doppelt antippen, skaliere ich das Bild doppelt so groß (-webkit-transform: scale (2)).

Wenn der Übergang abgeschlossen ist, tausche ich das 100x100px Bild mit einem größeren 200x200px Bild. Aus irgendeinem Grund ist das Bild sehr verschwommen.

Also habe ich versucht, ein img-Tag anstelle eines div-Tags zu verwenden, um meine Bilder anzuzeigen. Hier ist das Bild überhaupt nicht verschwommen. Warum ist das?

Ich muss Hintergrundbilder verwenden, um das Speicherlimit auf dem iPad und iPhone zu umgehen (wenn ich IMG-Tags verwende, treffe ich eine Speicherwand).

Kann mir jemand helfen? Vielen Dank.

    
John Johnson 07.08.2011, 20:53
quelle

1 Antwort

2

Ich beanspruche 3 Dinge:

  1. Wenn Sie ein div skalieren, werden die Pixel gestreckt und nicht mehr hinzugefügt.
  2. Hintergrundgröße: contain; Stellt sicher, dass Ihr Hintergrundbild vollständig angezeigt wird
  3. Das div ändert niemals die Größe.
  1. Wie Sie hier sehen können , ist das div immer noch 200x200 Pixel
  2. Das Bild wird auf 200x200 Pixel skaliert, auch wenn es 400x400 Pixel groß ist. Siehe hier
  3. Fast in 1. bewiesen, die Schrift ist immer noch scharf, aber Javascript denkt, dass die Breite und Höhe 200x200 Pixel ist.

Okay, für Ihre Lösung:

Es gibt mehrere Möglichkeiten.

Sie können Breite und Höhe statt Skalierung ändern. Das ist nicht schön, oder zumindest bist du sehr glücklich, wenn es dieser Animation nicht an Weg fehlt (auf iOS).

Etwas anderes könnte Skalierung und Erkennung webkitTranstionEnd

sein %Vor%

Vergessen Sie nicht, das Ereignis webkitTransitionEnd zu lösen. Sonst verdoppelt sich der Funktionsaufruf.

Aber was ist passiert, es ist Animation zurück. Also müssen wir die Übersetzung in einer Klasse behalten, damit wir sie hinzufügen und entfernen können, wenn wir wollen:

%Vor%

Und fügen Sie dann die Klasse hinzu, wenn wir animieren müssen:

%Vor%

Und entfernen Sie es erneut in webkitTransitionEnd

%Vor%

});    $ (this) .unbind ("webkitTransitionEnd");

Was ??! Es wird die Klasse nicht rechtzeitig hinzugefügt / entfernt ?! Was passiert.

Manchmal benötigt der Browser etwas Zeit, um sicherzustellen, dass die Klasse hinzugefügt wird. Daher müssen Sie die Einstellung von css in einem setTimeout (function () {...}, 0);

einschließen %Vor%

Auch wenn wir die Klasse entfernen:

%Vor%

So lange, jetzt ist das Problem, dass es skaliert und unscharf wird und nach der Skalierung wird es super scharf.

Was wir dagegen tun können, weiß ich nicht, aber ich hoffe, es hilft Ihnen wo!

Andreas

    
andlrc 10.08.2011 14:51
quelle

Tags und Links

Django: Verwenden von Annotate, Count und Distinct in einem Queryset Umfassende Open-Source-Testsuite für die C-Standardbibliothek [geschlossen]