Mijn cross-browser problemen (vooral Safari)

Twee lastige cross-browsering issues die ik tegenkwam tijdens de ontwikkeling van mobiele websites, en andere zaken om rekening mee te houden

wil ik hier vastleggen.

Problemen met het berekenen van de viewport hoogte door de adresbalk en navigatiebalk van de browser zelf

Safari en Samsung Internet hebben een ingebouwde navigatiebalk onderaan. Tenzij je expliciet show/hide instellingen hebt geconfigureerd, verschijnt deze bij het scrollen naar beneden en verdwijnt hij bij het scrollen naar boven.

Het probleem is dat de viewport hierdoor niet vaststaat en verandert.

Als je bijvoorbeeld een hoogte van 100vh instelt, wordt de lay-out correct weergegeven als de navigatiebalk niet zichtbaar is, maar als de navigatiebalk verschijnt, wordt de UI erdoor bedekt.

Om dit probleem op te lossen,

1. Gebruik dvh.

Dvh staat voor dynamische viewport en past zich automatisch aan bij veranderingen in de viewport hoogte. Hierdoor kan de UI-lay-out worden aangepast aan de aanwezigheid of afwezigheid van de adresbalk of de onderste navigatiebalk.

2. Svh kan ook worden overwogen.

Svh is de hoogte van het UI-gebied exclusief de adresbalk of navigatiebalk. In situaties waarin de adresbalk of navigatiebalk waarschijnlijk zal verschijnen, is het gebruik van svh nauwkeuriger.

Probleem met het verschuiven van de UI door het virtuele toetsenbord wanneer een input wordt geselecteerd (focus)

In mobiele Safari verschoof de bestaande UI toen ik een input selecteerde vanwege het virtuele toetsenbord. In andere browsers wordt het virtuele toetsenbord meestal absoluut weergegeven, maar in mobiele Safari leek het alsof het display block was toegepast en de ruimte innam.

In Safari wordt de hoogte van de viewport dynamisch aangepast wanneer het virtuele toetsenbord verschijnt, waardoor elementen die vh-eenheden gebruiken opnieuw worden aangepast en het probleem ontstaat. Om dit op te lossen,

1. Gebruik min-height.

De hoogte wordt vastgezet zodat de UI niet verschuift.

2. Pas vendor prefixes toe. (zie verderop)

Voeg een eigenschap toe die van toepassing is op specifieke browsers zoals Safari.

3. Beheer de viewport dynamisch met JavaScript.

* Deze methode wordt niet aanbevolen. De scrollhoogte beweegt plotseling, waardoor de lay-out knippert.

Een resize-event wordt toegevoegd om te detecteren wanneer de viewport verandert en om de juiste stijl toe te passen.

3-1. Beheer de positie wanneer het focusin-event optreedt.

3-2. Beheer de positie wanneer het virtuele toetsenbord verschijnt. (in het onderstaande voorbeeld wordt een class toegepast)

Het is het beste om het volledig met CSS op te lossen, maar als dit niet lukt met bovenstaande voorbeelden, controleer dan of het element position: absolute of fixed is, en probeer de eigenschappen top, right, left en bottom te verwijderen en de CSS aan te passen.

Overige

Ik heb nog een paar dingen gevonden om te overwegen bij het ontwikkelen van mobiele websites voor Safari.

1. Gebruik vendor prefixes bij het gebruik van bepaalde eigenschappen.

* Vendor prefixes zijn voorvoegsels die ervoor zorgen dat browsers specifieke CSS-eigenschappen begrijpen en renderen. Ze zorgen ervoor dat CSS dat op verschillende manieren is geïmplementeerd door browsers, zoals bedoeld wordt toegepast. Dit zorgt voor consistentie tussen browsers en compatibiliteit met oudere browsers.

Soorten

-webkit-: Chrome, Safari etc.
-moz-: Mozilla Firefox
-ms-: Internet Explorer en Edge
-o-: Opera

Hieronder staan enkele typische eigenschappen waarvoor vendor prefixes nodig zijn.

Verder beperkt Safari de capaciteit van LocalStorage en SessionStorage tot ongeveer 5 MB, en de opslagruimte wordt niet gedeeld tussen tabs, dus let hierop.