Fix: Scrolling af Overlays i Firefox Mobil

12/05/2022

★★★★★Rating: 4.89 (13235 votes)

I den moderne webudvikling er brugen af overlays, modalvinduer og pop-ups blevet en uundværlig del af brugeroplevelsen. De giver os mulighed for at præsentere vigtig information, indsamle brugerinput eller fremhæve specifikke elementer uden at navigere væk fra den aktuelle side. En af de mest almindelige udfordringer, når man implementerer disse elementer, er at styre scrolling-adfærden. Typisk ønsker man at deaktivere scrolling på baggrunden (body-elementet), når et overlay er aktivt, og i stedet aktivere scrolling inde i selve overlayet, hvis dets indhold overskrider skærmens højde. Dette skaber en ren og fokuseret brugeroplevelse.

How do I hide an overflow? — Try overflow: auto; if you want the overflow to be visible with a scroll or overflow: hidden; if you want to hide it. Also, Use parent div instead of using the body as the container.. See this: border: 1px dashed;

For at opnå dette benytter de fleste udviklere en kombination af CSS-regler: overflow: hidden; på body-elementet og overflow: auto; på det div-element, der udgør overlayet. Denne tilgang fungerer problemfrit i de fleste moderne browsere, herunder Chrome, Safari, Edge og de fleste mobile browsere. Men så støder man på en frustrerende undtagelse: Firefox mobil.

Indholdsfortegnelse

Problemet Afsløret: Firefox Mobils Unikke Adfærd
Hvorfor Sker Dette? Dyk Ned i CSS-Specifikationen
Den Effektive Løsning: Tæm HTML- og Body-Elementerne
- CSS-koden, der løser problemet:
Bedste Praksis for Overlays og Modalvinduer
Alternativer og Overvejelser
Sammenligningstabel: Overflow-Egenskabens Værdier
Ofte Stillede Spørgsmål (FAQ)
Konklusion

Problemet Afsløret: Firefox Mobils Unikke Adfærd

Forestil dig dette scenarie: Du har omhyggeligt implementeret dit overlay. Når det åbnes, sætter du body { overflow: hidden; } og dit overlay-div får overflow: auto;. På din desktop-browser og de fleste mobilbrowsere fungerer det perfekt: baggrunden står stille, og du kan kun scrolle inde i overlayet. Men når du tester på Firefox mobil, opdager du pludselig, at baggrunden stadig kan scrolles! Det er som om overflow: hidden; på body simpelthen bliver ignoreret, hvilket ødelægger den ønskede brugeroplevelse og skaber en forvirrende navigation for brugeren.

Dette problem er ikke et tegn på dårlig kodning fra din side, men snarere et resultat af, hvordan Firefox tolker og anvender en specifik del af CSS-specifikationen. Det er en subtil, men afgørende forskel, der kan give hovedbrud for selv erfarne webudviklere. Du kan have en rød boks, der repræsenterer din body med overflow: hidden;, og en cyan boks, der repræsenterer dit overlay med overflow: auto;. I alle andre browsere er den røde boks låst, men i Firefox mobil kan du stadig manipulere dens scroll-position, uanset hvad du har sat af CSS-regler på den.

Hvorfor Sker Dette? Dyk Ned i CSS-Specifikationen

For at forstå, hvorfor Firefox mobil opfører sig anderledes, er vi nødt til at dykke ned i den officielle CSS 2.2 specifikation for overflow-egenskaben. Specifikationen indeholder en vigtig detalje vedrørende, hvordan overflow-egenskaben anvendes på rod-elementet (<html>) og <body>-elementet:

UAs must apply the 'overflow' property set on the root element to the viewport. When the root element is an HTML "HTML" element or an XHTML "html" element, and that element has an HTML "BODY" element or an XHTML "body" element as a child, user agents must instead apply the 'overflow' property from the first such child element to the viewport, if the value on the root element is 'visible'.

Lad os bryde dette ned. Det betyder i bund og grund, at hvis <html>-elementet har en overflow-værdi på visible (hvilket er standardværdien), så vil browseren i stedet tage overflow-værdien fra <body>-elementet og anvende den direkte på viewporten. Viewporten er det synlige område af din browser, som brugeren interagerer med.

Konsekvensen er, at hvis du sætter body { overflow: hidden; }, og html stadig har sin standardværdi overflow: visible;, så vil overflow: hidden; fra body blive "flyttet" og anvendt på viewporten. Problemet er, at denne "flytning" ikke altid fungerer som forventet, især i visse browserimplementeringer som Firefox mobil. I disse tilfælde kan det føre til, at viewporten stadig scroller, selvom du har forsøgt at forhindre det på body-elementet.

Firefox mobil tolker denne specifikation mere strengt eller på en måde, der adskiller sig fra andre browsere. Mens andre browsere måske mere "tolerant" anvender overflow: hidden fra body til viewporten og effektivt forhindrer scrolling, lader Firefox mobils implementering stadig viewporten scrolle, når html-elementet er overflow: visible. Dette er årsagen til den uoverensstemmelse, du oplever.

Den Effektive Løsning: Tæm HTML- og Body-Elementerne

Den gode nyhed er, at løsningen på dette problem er relativt simpel og elegant. For at sikre, at overflow: hidden; anvendes korrekt og forhindrer scrolling af baggrunden i alle browsere, inklusiv Firefox mobil, skal du blot udvide din CSS-regel til også at inkludere HTML-elementet.

Den mest robuste løsning er at anvende overflow: hidden; på bådehtml- og body-elementerne. Dette omgår specifikationens undtagelse, da html-elementet nu udtrykkeligt ikke længere er visible.

CSS-koden, der løser problemet:

html, body {
 overflow: hidden;
 height: 100%; /* Vigtigt for at sikre, at elementerne fylder viewporten */
}

Lad os uddybe, hvorfor dette virker, og hvad height: 100%; gør:

overflow: hidden; på html: Ved at sætte overflow: hidden; direkte på <html>-elementet, sikrer du, at browseren ikke længere falder tilbage til den specifikke regel for body's overflow til viewporten. Du fortæller nu browseren direkte, at rod-elementet ikke må scrolle, hvilket overstyrer den potentielt problematiske adfærd i Firefox mobil.
overflow: hidden; på body: Det er stadig en god praksis at beholde denne regel på body, da det giver en klar intention om, at body-indholdet ikke skal scrolle. Selvom html-reglen er den afgørende for Firefox mobil, bidrager denne til konsistens og klarhed.
height: 100%; på html, body: Dette er et kritisk element, der ofte overses. Når du sætter overflow: hidden;, kan det i nogle tilfælde medføre, at html- og body-elementerne ikke længere fylder hele viewportens højde. Hvis de ikke fylder 100% af højden, kan der stadig opstå små huller eller uventet scrolling. Ved at sætte height: 100%; sikrer du, at både html og body strækker sig over hele viewporten, hvilket effektivt "fanger" alt indhold og forhindrer enhver form for utilsigtet scrolling.

For dit overlay-div skal du stadig sørge for, at det er korrekt positioneret og kan scrolle sit eget indhold:

.dit-overlay-container {
 position: fixed; /* Vigtigt for at overlayet forbliver på plads */
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 overflow-y: auto; /* Tillader lodret scrolling inde i overlayet */
 -webkit-overflow-scrolling: touch; /* For glat scrolling på iOS */
}

position: fixed; er afgørende her, da det tager overlayet ud af det normale dokumentflow og positionerer det i forhold til viewporten. Dette sikrer, at overlayet forbliver synligt og på plads, selvom brugeren (forsøger at) scrolle. overflow-y: auto; sikrer, at kun indholdet inde i overlayet scroller, hvis det overskrider dets højde. Endelig forbedrer -webkit-overflow-scrolling: touch; scrolling-oplevelsen på iOS-enheder, hvilket giver en mere indbygget og glat følelse.

Bedste Praksis for Overlays og Modalvinduer

Ud over at løse scrolling-problemet i Firefox mobil er der flere andre bedste praksis, du bør overveje, når du implementerer overlays for at sikre en optimal brugeroplevelse og tilgængelighed:

Semantik og Struktur

Brug semantisk HTML til dine overlays. Et modalvindue kan f.eks. være et <dialog>-element (med polyfill for ældre browsere) eller en <div> med relevante ARIA-attributter. Overvej en struktur med en overordnet container, et indholdsområde og en lukke-knap.

Fokusstyring

Når et overlay åbnes, skal fokus flyttes til det første interaktive element inde i overlayet (f.eks. en input-felt eller en knap). Når overlayet lukkes, skal fokus returneres til det element, der åbnede det. Dette er afgørende for tastaturnavigation og skærmlæserbrugere.

Does overflow-X for mobile work on safari? — And now it works fine. Still not optimal on Safari, but, anyways. The topic ‘Overflow-x for Mobile not working’ is closed to new replies.

Tilgængelighed (ARIA)

Implementer ARIA-attributter for at gøre dine overlays tilgængelige for brugere af skærmlæsere. Brug role="dialog" eller role="alertdialog", aria-modal="true", aria-labelledby og aria-describedby for at give kontekst til skærmlæsere. Sørg også for, at baggrunden er "inert" (ikke tilgængelig for interaktion) mens overlayet er åbent, ofte ved at anvende aria-hidden="true" på baggrundselementerne.

Lukningsmekanismer

Tilbyd flere måder at lukke overlayet på: en synlig lukke-knap (X-ikon), mulighed for at trykke på ESC-tasten, og potentielt også klik udenfor overlayets indhold (dog med forsigtighed for ikke at forstyrre brugeren).

Ydeevne

Undgå tunge animationer eller for mange DOM-ændringer, når overlays åbnes og lukkes. Optimer renderingen for at sikre en flydende overgang, især på mobile enheder.

Alternativer og Overvejelser

Mens den beskrevne CSS-løsning er den mest ligefremme og effektive, findes der også andre tilgange, som dog ofte er mere komplekse eller har specifikke ulemper:

JavaScript-baserede løsninger: Man kunne i teorien manipulere scrolling via JavaScript (f.eks. ved at gemme scroll-positionen, nulstille den, og genoprette den ved lukning). Dette er dog generelt mere komplekst, kan føre til "jumps" i scrolling og er mindre robust end en ren CSS-baseret tilgang. Det bør kun overvejes, hvis de simple CSS-løsninger ikke dækker et meget specifikt behov.
position: fixed; alene for overlays: For meget simple overlays kan man nogle gange nøjes med at placere overlayet med position: fixed;. Dette forhindrer overlayet i at scrolle med baggrunden. Problemet er dog, at baggrunden stadig kan scrolle, hvilket ikke er den ønskede adfærd for et ægte modalvindue, der skal blokere interaktion med baggrunden. Desuden kan position: fixed; elementer interagere uforudsigeligt med virtuelle tastaturer på mobil, hvilket kan skabe et dårligt brugeroplevelse.

Den primære CSS-løsning med html, body { overflow: hidden; height: 100%; } er næsten altid den foretrukne metode på grund af dens enkelhed, ydeevne og brede browserkompatibilitet.

Sammenligningstabel: Overflow-Egenskabens Værdier

For at give et bedre overblik over overflow-egenskaben og dens forskellige værdier, er her en kort oversigt:

Egenskab	Beskrivelse	Typisk Anvendelse
`visible`	Standardværdi. Indhold, der overskrider elementets dimensioner, er synligt og renderes udenfor elementets boks. Ingen scrollbars vises.	Standardadfærd for de fleste elementer.
`hidden`	Indhold, der overskrider elementets dimensioner, klippes og er ikke synligt. Der vises ingen scrollbars, og indholdet kan ikke scrolles.	Skjule overløbende indhold, forhindre scrolling af et element.
`scroll`	Indhold, der overskrider elementets dimensioner, klippes, og browseren viser altid scrollbars (både vandret og lodret), selvom der ikke er noget at scrolle.	Når faste scrollbars ønskes uanset indholdsstørrelse.
`auto`	Indhold, der overskrider elementets dimensioner, klippes, og scrollbars vises kun, hvis indholdet faktisk overløber. Dette er den mest almindelige og fleksible værdi.	Til indholdsblokke, der potentielt kan scrolle, f.eks. tekstbokse, billedgallerier.

For at styre scrolling i specifikke retninger kan du også bruge overflow-x (vandret) og overflow-y (lodret) med de samme værdier.

Ofte Stillede Spørgsmål (FAQ)

Hvorfor virker overflow: hidden på body ikke alene i Firefox mobil?

Det skyldes en specifik regel i CSS 2.2 specifikationen. Hvis <html>-elementet har sin standardværdi overflow: visible, vil browseren i stedet anvende overflow-værdien fra <body> direkte på viewporten. Firefox mobil tolker denne regel på en måde, der lader viewporten scrolle, selvom body har overflow: hidden. Løsningen er at sætte overflow: hidden på <html>-elementet.

Skal jeg altid sætte overflow: hidden på html, når jeg bruger overlays?

Ja, det er en stærkt anbefalet praksis. Selvom det primært løser et problem i Firefox mobil, sikrer det en mere konsistent og forudsigelig scrolling-adfærd på tværs af alle browsere, når du ønsker at deaktivere baggrundsscrolling for et overlay. Det er en simpel tilføjelse, der forhindrer fremtidige kompatibilitetsproblemer.

Påvirker det SEO at manipulere overflow-egenskaben?

Generelt nej. Søgemaskiner er i stand til at fortolke CSS og forstår, at overflow: hidden blot styrer visningen af indholdet, ikke dets tilgængelighed. Så længe dit indhold stadig er tilgængeligt i DOM'en, og dit overlay er semantisk korrekt opbygget, vil det ikke have en negativ indvirkning på din SEO.

Kan jeg bruge position: fixed alene til at forhindre scrolling af baggrunden?

Nej, position: fixed positionerer kun elementet i forhold til viewporten og forhindrer det i at scrolle med baggrunden. Det forhindrer dog ikke selve body- eller html-elementerne i at scrolle. For at deaktivere baggrundsscrolling skal du stadig bruge overflow: hidden på html, body.

Hvordan sikrer jeg glat scrolling inde i mit overlay på iOS-enheder?

For at opnå en glat, indbygget scrolling-oplevelse inde i et scrollbart overlay på iOS, skal du tilføje den specifikke CSS-egenskab -webkit-overflow-scrolling: touch; til dit overlay-element. Dette aktiverer hardware-accelereret scrolling, der efterligner den naturlige følelse af scrolling på iOS.

Konklusion

At forstå nuancerne i CSS-specifikationer og browsernes fortolkning heraf er afgørende for at skabe robuste og problemfrie weboplevelser. Problemet med scrolling af baggrunden i Firefox mobil, når et overlay er åbent, er et klassisk eksempel på en situation, hvor en dybdegående forståelse kan forvandle frustration til en simpel løsning. Ved blot at tilføje overflow: hidden; og height: 100%; til dit <html>-element udover <body>-elementet, kan du sikre, at dine overlays fungerer som tiltænkt på tværs af alle browsere, og dermed levere en konsekvent og professionel brugeroplevelse. Husk altid at teste dine implementeringer på tværs af forskellige enheder og browsere for at fange disse små, men vigtige, detaljer.

Hvis du vil læse andre artikler, der ligner Fix: Scrolling af Overlays i Firefox Mobil, kan du besøge kategorien Teknologi.