Als je websites ontwikkelt zal je door de jaren heen vaak de trukendoos open moeten hebben getrokken om bepaalde (render)problemen te omzeilen. Een slecht uitgerenderde website kan niet alleen de ontwikkelaar, maar ook de gebruikers een doorn in het oog zijn. Zelfs de kleinste fout, zoals het toevoegen van een extra pixel aan de dikte van een lijn of het verkeerd uitlijnen van een tabel kan verschrikkelijke gevolgen hebben voor je website en gebruikerservaringen.

Dat was vroeger stukken erger. Toen de verschillen tussen verschillende browsers groter waren dan nu. Veel van deze verschillen zijn door de jaren heen wat kleiner geworden dankzij de W3C webstandaarden. De verschillen die er nog zijn kunnen tegenwoordig worden genegeerd dankzij bibliotheken als jQuery. Deze maken het hacken van JavaScript niet alleen makkelijker maar verkleinen de verschillen tussen de webbrowsers nog meer.

Deze libraries kunnen er echter wel voor zorgen dat bepaalde browserbugs (moeten) blijven bestaan. Als browserbedrijven enkele bugs fixen is de kans aanwezig dat deze oude patches en workarounds verstoren of zelfs ongedaan maken. In sommige gevallen wordt de "fix" het probleem die de stabiliteit onderuit haalt.

De stabiliteit die libraries als jQuery met zich meebrachten hebben browserbouwers ook aangespoord sneller te werken en hun browser update-processen te versnellen en te automatiseren. Mozilla pusht elke paar maanden een nieuwe versie van zijn browser naar de gebruikers. In het verleden was een bepaalde browserversie een standaard uitgangspunt voor webontwikkelaars en konden zij een schattig .gifje op hun website plaatsen met de melding dat deze site het beste werkt onder internet Explorer 5. Tegenwoordig volgen de updates elkaar zo snel op dat dit niet meer te doen is.

Ondertussen vragen wij ook nog eens meer van onze browsers dan ooit. De website van mijn lokale krant kan mijn machine flink laten zweten. Popover-advertenties, video's die automatisch beginnen te spelen en code die zichzelf in de achtergrond aanpast aan mijn recente browsergeschiedenis.

Dit betekent wel dat moderne browserbugs zeldzamer zijn geworden, maar ook lastiger zijn te vinden. Wij kijken naar verschillende van deze bugs.

Layout

De meest zichtbare browser bugs zijn toch wel de layout glitches. Mozilla's Bugzilla database heeft 10 secties voor layout problemen en dat gaat niet over layout issues die zijn gerelateerd aan de DOM, CSS of Canvas. De browser's belangrijkste taak is het rangeren van tekst en afbeeldingen. En dat goed voor elkaar krijgen is vaak moeilijk.

Veel layout bugs lijken soms zo klein te zijn dat ze bijna verwaarloosbaar zijn. Bugzilla bug 1303580 gaat bijvoorbeeld over de cursieve weergave van een font als CSS-tags vragen om oblique. Dat zal waarschijnlijk alleen de hardcore font-fan opvallen ondertussen gaat bug 1296269 over delen van het Comic Sans-font die worden afgekapt, tenminste, onder Windows. Font-ontwerpers maken een bepaalde keuze en hechten daar zeer veel waarde aan. Als zij niet de exacte look and feel over alle browsers kunnen krijgen kunnen ze gefrustreerd raken.

Zo zijn er honderden duizenden, misschien zelfs miljoenen van dit soort bugs.

Memory leaks

Het is soms lastig om memory leaks te traceren. Zij veranderen geen zichtbare eigenschappen, de website wordt correct weergegeven maar de browser ruimt z'n rommel niet op. Te veel bezoekjes aan deze site kan ervoor zorgen dat je computer ongelooflijk traag wordt. Al je werkgeheugen is gereserveerd door je browser en wordt niet meer vrijgegeven aan je systeem en je besturingssysteem gaat geheugen wegschrijven naar de harde schijf (virtueel geheugen) en jij moet langer wachten tot je computer weer gereed is.

De details van memory leak bugs kunnen behoorlijk geheimzinnig overkomen en we mogen van geluk spreken dat sommige programmeurs de tijd nemen deze problemen op te lossen. Kijk eens naar issue 640578 uit de Chromium browser stack. Het aanpassen van de DOM door te spelen met de innerHTML-property lekt geheugen. Een simpel stukje code met een strakke repeat-loop die requestAnimationFrame aanroept dupliceert dit probleem. Er zijn tientallen issues als deze.

Het ligt natuurlijk niet altijd aan de browser. Chromium issue 640922 kijkt naar een memory leak en heeft een voorbeeld. Als je dit probleem verder analyseert zie je dat de voobeeldcode Date() objecten maakt om de tijd te testen en deze waren waarschijnlijk de oorzaak van het probleem.

Flash

Het hoge woord is eruit. Iedereen is de prachtige anti-aliased kunstwerkjes en web-videos van Adobe's Flash ons bracht alweer vergeten. Flash wordt bijna alleen nog maar genoemd als er iets crasht. Ook al is het niet altijd de fout van Flash. Flash mag dan wel met pensioen zijn gestuurd, maar de plug-in zit nog niet in het bejaardentehuis. Adobe's plug-in is nog op genoeg computers te vinden en zelfs de modernste bedrijven gebruiken nog wel eens Flash-code op hun pagina's. Het verbaast ons nog steeds hoe vaak wij Flash nog tegen komen op het internet.

Aanrakingen en clicks

Het is niet makkelijk te moeten werken met verschillende vormen van input. Zeker nu tablets en telefoons taps/aanrakingen genereren die zich anders gedragen dan een muisklik. Het zal dan ook geen verrassing zijn dat er meer dan genoeg bugs te vinden zijn op dat gebied. Het Bootstrap JavaScript framework houdt een hit list bij met de verschrikkelijkste bugs op dat gebied.

Safari mist bijvoorbeeld zo nu en dan vingertaps in de tekst in de tag (Bug 151933). Soms werkt het select> menu niet op de iPad omdat de browser de rechthoek voor inputs heeft verschoven (Bug 150079). Soms triggeren clicks vreemde wiebelingen in een item (soms lijkt het alsof een hippe designer dat met opzet heeft gedaan maar nee, het is toch echt een bug. Bug 158276 welteverstaan). Al deze kleine probleempjes kunnen een hoop verwarring opleveren als tekst of afbeeldingen zich niet gedragen zoals wij dat verwachten.

Video

Het grote plan betreffende video op het web was altijd het versimpelen van het brengen van audio en video door de verantwoordelijkheid naar de browser te verplaatsen en uit de wereld van plug-ins te halen. Dat heeft een hoop interface issues opgelost maar lang niet alle problemen. De video-buglijst is lang, erg lang en veel van deze bugs vallen meteen op. Bugzilla bug 754753 meldt: "veelal rode en groene vlekken die ghost images bevatten" en Bug 1302911 heeft het over stotteren "bij gebrek aan een beter woord".

Sommige van de meest complexe issues komen naar boven omdat browsers verschillende encryptiemechanismen integreren om piraterij te voorkomen. Bug 1304899 meldt dat Firefox niet automatisch het juiste encryptiemechanisme (EME) downloadt van Adobe. Is dat Firefox's fout of ligt het toch aan Adobe. Misschien een gekke proxy?

Video bugs blijven voorlopig de buglijsten nog wel domineren. |Het integreren van web video met andere vormen van content door video tags toe te voegen aan HTML5 heeft een boel nieuwe mogelijkheden gecreëerd voor ontwikkelaars. Maar elke nieuwe mogelijkheid betekent ook weer nieuwe mogelijkheden voor bugs en andere ongeregeldheden.

Hovering

De mogelijkheid voor webpagina's om de muis te volgen over de pagina is erg handig voor ontwikkelaars om te zien waar gebruikers naar kijken en hoe zij navigeren over de website. Daarnaast kan deze functie gebruikers net wat meer informatie geven over bepaalde elementen op een pagina. Denk daarbij aan ondersteunende teksten achter een woord of afbeelding. Helaas gaat dat ook niet altijd even goed.

Microsoft's nieuwe browser, Edge, verstopt bijvoorbeeld de cursor niet als de muis over enkele select input items (817822) hangt. Soms stopt het hoveren niet (5381673 en soms is het hover event gelinkt aan het verkeerde item (7787318). Dit zorgt allemaal voor verwarring en ontmoedigt het gebruik van mooie effecten.

Malware

Het is soms aanlokkelijk om browserontwikkelaars de schuld te geven van alle browser bugs, maar dat zou niet helemaal eerlijk zijn. Er worden ook veel problemen veroorzaakt door malware die is ontworpen om over te komen als handige plug-ins. In veel gevallen doet de malware ook echt iets nuttigs, terwijl het op de achtergrond stiekem clicks steelt.

Het probleem is dat de extension-interface behoorlijk krachtig is. Een extension kan willekeurige tags en code toevoegen aan alle websites. In de juiste handen kan dit geweldig zijn maar het is makkelijk te bedenken hoe dit gigantisch misbruikt kan worden door kwaadwillenden.

Dit is niet echt een bug, maar meer een diep filosofisch probleem met een heel coole feature. Gelukkig is dit een "probleem" dat gebruikers zelf kunnen tackelen. Extentions kunnen worden uitgeschakeld en/of worden ingezet op slechts een handjevol websites. Deze API is wellicht wat te krachtig voor de normale sterveling, Het is daardoor erg verleidelijk de extensies de grootste, ergste bugs van allemaal te noemen, maar dat zou alle goede dingen die ze voor ons doen teniet doen.