Schwerwiegendes Leistungsproblem bei Verwendung von remodal und pickadate in Safari

8

Ich habe versucht, Remodal zusammen mit Pickadate zu verwenden, so dass ich einen Datums-Picker und Zeit-Picker aus dem Modal erstellen kann. Beim ersten Versuch fand ich heraus, dass der Datapicker durch das Remodal versteckt war, wie unten gezeigt.

Um dieses Problem zu beheben, habe ich eine .full-screen -Klasse für mein Remodal erstellt.

%Vor%

Es funktioniert dann in Chrome einwandfrei, wie gezeigt:

Dann kann ich die Seite auf meinem iOS testen, und ich habe herausgefunden, dass das Overlay durcheinander ist. Ich glaube, es wurde am unteren Rand des aktiven Eingabeelements angezeigt. Wie in iOS Safari und iOS Chrome gezeigt:

Normalerweise würde ich dann meine Safari in MacOSX öffnen und versuchen, das CSS zu reparieren. Wenn dieselbe Seite jedoch in Safari geladen wird, gibt es einen merkwürdigen schwerwiegenden Leistungseinbruch:

  • Ich konnte das Entwicklerwerkzeug nicht einmal laden
  • Safari-CPU konstant über 100%
  • Es dauert ~ 15 Sekunden, um das modale
    • zu laden
  • Es dauert ~ 10 Sekunden, um das Pickadate zu laden.

und das Ergebnis ist wie folgt:

Wenn Sie es versuchen möchten, habe ich vorübergehend den Link hier geöffnet, klicke auf die grüne Aktionstaste und das Modal sollte geladen werden . (versuchen Sie es zuerst auf Chrom, dann Safari.) und Sie werden den Unterschied bemerken.

    
Chris Yeung 19.05.2015, 17:58
quelle

1 Antwort

2

Sieht so aus, als ob Sie Safari 6 oder eine etwas ältere Version verwenden? Ich habe diese Version im Moment nicht verfügbar, aber ich glaube, dass ich für einige Ihrer Probleme Korrekturen gefunden habe.

  1. Am .remodal-overlay, .remodal-wrapper , das Sie verwenden -webkit-transform:translateZ(0px) , entferne das.
  2. Am body.remodal-is-active .remodal entfernen -webkit-transform: scale(1);
  3. Am .remodal.full-screen set height bis 100vh und width bis 100vw
  4. Am .remodal entfernen -webkit-transform: scale(0.95); , entfernen Sie auch -webkit-transition: -webkit-transform 0.2s ease-out, opacity 0.2s ease-out;

Ihre Positionierung sollte jetzt besser sein. Aber einige Leistungsprobleme bleiben noch.

Ihre CSS- und JS-Dateien sind verkettet, was es ein bisschen schwierig macht, richtig durchzugehen, aber ich bemerke einige Dinge, die Sie vielleicht untersuchen sollten:

  • Anstatt zwei Zeitselektoren und zwei Datumsauswahlelemente zu erstellen, möchten Sie möglicherweise nur jeweils eines erstellen und an das aktuell ausgewählte Eingabeelement anhängen. Dies sollte den Browser etwas entlasten. Dafür gibt es Unterstützung .
  • Haben Sie versucht, legacy.js für pickadate.js ?
    • einzubeziehen?
  • Sogar auf einem 2013 Mac mit Safari 8 ist es manchmal abgehackt. Haben Sie vielleicht noch andere Datums- und Zeitauswahl?
Niklas Brunberg 27.05.2015 10:18
quelle

Tags und Links

Django: Verwenden von Annotate, Count und Distinct in einem Queryset Realm Zugriff von falschem Thread Android