Schwerwiegendes Leistungsproblem bei Verwendung von Remodal und Pickadate auf Safari

Question

Ich habe versucht, Remodal zusammen mit Pickadate zu verwenden, so dass ich eine Datumsauswahl und Zeitauswahl 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 überwinden, habe ich eine .full-screen Klasse für meine remodal.

.remodal { 
    &.full-screen { 
     max-width: none; 
     height: 100%; 
     width: 100%; 
     margin: 0 auto; 
    } 
} 

Es funktioniert dann völlig in Ordnung in Chrome, wie gezeigt:

Dann habe ich die Seite auf meinem iOS zu testen bekommen, und ich fand heraus, das Overlay messed ist. Ich denke, es wurde am unteren Rand des aktiven Eingabeelements geklebt. Wie in den beiden iOS-Safari und iOS Chrom gezeigt:

Normalerweise würde ich dann meine Safari in MacOSX öffnen und versuchen, die CSS zu beheben. Wenn jedoch die gleiche Seite in Safari geladen wird, gibt es einen seltsamen ernsthaften Performance-Hit:

• Ich konnte nicht einmal das Entwickler-Tool
• Safari CPU lädt ständig über 100%
• Es dauert ~ 15 Sekunden zum Laden des Modales
• Es dauert ~ 10 Sekunden, um das Pickadate zu laden.

und das Ergebnis ist wie folgt:

Wenn Sie versuchen wollen, ich habe vorübergehend den Link öffnen here, klicken Sie auf die grüne Aktionstaste und die modale laden soll. (versuchen Sie es zuerst auf Chrom, dann Safari.) und Sie werden den Unterschied bemerken.

Answer 1

Sieht es 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, ich habe Korrekturen für einige Ihrer Probleme gefunden.

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

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

Ihre CSS und JS-Dateien werden verkettet es ein bisschen schwer machen richtig durch zu gehen, was passiert, aber ich habe ein paar Dinge bemerken Sie vielleicht schauen:

• Anstatt zwei Mal Selektoren zu schaffen und zwei Datumsauswahlelemente, von denen Sie möglicherweise nur jeweils eines erstellen und an das aktuell ausgewählte Eingabeelement anhängen möchten. Dies sollte den Browser etwas entlasten. There is support for this.
• Haben Sie versucht, einschließlich legacy.js für pickadate.js?
• Sogar auf einem 2013 Mac mit Safari 8 ist es manchmal abgehackt. Haben Sie vielleicht noch andere Datums- und Zeitauswahl?