7 bug cronici del browser che affliggono il web

I browser web sono fantastici. Se non fosse per i browser, non saremmo in grado di connetterci altrettanto bene con utenti e clienti riversando i nostri dati e documenti nei loro desktop, tablet e telefoni. Purtroppo, tutto il meraviglioso contenuto fornito dal browser web ci rende molto più frustrati quando il rendering non è così elegante o privo di bug come vorremmo.

Quando si tratta di sviluppare siti Web, siamo tanto in balia dei browser quanto in debito con loro. Qualsiasi glitch su qualsiasi piattaforma salta fuori, specialmente quando si blocca sulle macchine dei nostri utenti. E con il design in quanto tale da distinguersi o adattarsi, qualsiasi linea grassa o tocco di colore applicato in modo errato distrugge l'esperienza estetica che abbiamo lavorato per creare. Anche il più piccolo errore, come l'aggiunta di un pixel in più alla larghezza di una linea o il disallineamento di una tabella di un po ', può risultare in un'esperienza utente frustrante, per non parlare del costo di scoperta, verifica e aggiramento.

Certo, era peggio. Le enormi differenze tra i browser sono state in gran parte cancellate dalla fedeltà agli standard web del W3C. E le differenze che rimangono possono essere generalmente ignorate, grazie alla proliferazione di librerie come jQuery, che non solo rendono più facile l'hacking di JavaScript, ma anche documentano i modi in cui i browser non sono gli stessi.

Queste librerie hanno l'abitudine di bloccare i bug del browser sul posto. Se le società produttrici di browser correggono alcuni dei loro peggiori bug, le nuove "correzioni" possono interrompere le vecchie patch e le soluzioni. All'improvviso la "correzione" diventa il problema che sta interrompendo la vecchia stabilità che abbiamo sistemato intorno al bug. I programmatori non possono vincere.

La stabilità portata da librerie come jQuery ha anche incoraggiato i costruttori di browser ad accelerare e automatizzare i processi di aggiornamento del browser. Mozilla si impegna a rilasciare una nuova versione di Firefox ogni pochi mesi. In passato, ogni versione sarebbe stata un obiettivo stabile per gli sviluppatori web e potevamo inserire una piccola GIF sui nostri siti affermando che funzionano meglio, ad esempio, in IE5. Ora il contachilometri gira così rapidamente che una nuova versione di Firefox verrà rilasciata nel tempo necessario all'HTML per viaggiare dal server al client.

Nel frattempo, chiediamo ai browser di fare molto di più. Il sito web del mio giornale locale mette in ginocchio la mia macchina: annunci popover in espansione, frammenti di video con riproduzione automatica, codice per personalizzare gli annunci nella mia cronologia di navigazione recente. Se mia figlia guarda un sito di bambole, JavaScript sta cercando freneticamente di trovare un annuncio di bambole da mostrarmi. Tutta questa magia inebria la CPU.

Tutto ciò significa che i bug del browser di oggi sono più rari ma più difficili da individuare. Ecco uno sguardo agli ultimi generi di bug del browser che affliggono - o in molti casi, semplicemente assillano - web designer e sviluppatori.

disposizione

I bug più visibili del browser sono problemi di layout. Il database dei bug di Mozilla Bugzilla ha 10 sezioni per i problemi di layout e non include i problemi di layout classificati come correlati a DOM, CSS o Canvas. Il compito più importante del browser è organizzare il testo e le immagini e ottenerlo correttamente è spesso difficile.

Molti bug di layout possono sembrare piccoli al punto da essere quasi esoterici. Il bug Bugzilla 1303580, ad esempio, chiama Firefox per l'utilizzo della versione in corsivo di un carattere quando i tag CSS richiedono obliquo. Forse solo un appassionato di font lo noterebbe. Nel frattempo il bug Bugzilla 1296269 segnala che parti delle lettere in Comic Sans vengono tagliate, almeno su Windows. I designer di font fanno la differenza e per loro è importante. Quando non riescono a ottenere l'aspetto esatto e corretto su tutti i browser, i web designer possono forse diventare un po 'eccessivamente frustrati.

Ci sono centinaia, migliaia, forse anche milioni di questi bug. In, abbiamo riscontrato problemi con le immagini che scompaiono nel nostro editor CMS e i tag span che appaiono solo nel DOM.

Perdite di memoria

Spesso è difficile notare le perdite di memoria. Per definizione, non modificano alcuna proprietà visibile. Il rendering del sito Web è corretto, ma il browser non viene pulito dopo il fatto. Qualche troppi viaggi a siti Web che attivano la perdita e la tua macchina rallenta a una scansione perché tutta la RAM è bloccata con una struttura di dati che non verrà mai riproposta. Pertanto, il sistema operativo scambia freneticamente blocchi di memoria virtuale su disco e trascorri il tuo tempo ad aspettare. La scelta migliore è riavviare la macchina.

I dettagli dei bug di perdita di memoria possono essere incredibilmente arcani e siamo fortunati che alcuni programmatori si prendano il tempo per risolverli. Considera il problema 640578 dallo stack del browser Chronium. Modificare una parte del DOM armeggiando con la innerHTMLproprietà perde la memoria. Un pezzo di codice di esempio con una chiamata a ciclo ripetuto stretto requestAnimationFrameduplicherà il problema. Ci sono dozzine di problemi come questo.

Ovviamente non è sempre colpa del browser. Il problema di Chromium 640922, ad esempio, descrive anche una perdita di memoria e fornisce un esempio. Ulteriori analisi, tuttavia, mostrano che il codice di esempio stava creando Date()oggetti lungo la strada per testare il tempo, e probabilmente erano la fonte del problema.

Veloce

È praticamente ufficiale. Tutti hanno dimenticato i meravigliosi artwork e video web anti-alias che Adobe Flash ha portato sul web. Diamo invece la colpa a tutti gli arresti anomali che potrebbero o meno essere stati colpa sua. Ora è ufficialmente in pensione, ma non sta andando rapidamente. Anche alcune delle aziende più lungimiranti che spingono gli standard web sembrano ancora avere il codice Flash nelle loro pagine. Sono sorpreso di quanto spesso trovo codice Flash al di fuori dei siti web di MySpace e GeoCities.

Tocchi e clic

Non è facile destreggiarsi tra i vari tipi di input, soprattutto ora che tablet e telefoni generano tocchi che possono o meno agire come un clic del mouse. Non dovrebbe sorprendere quindi scoprire che ci sono molti bug in quest'area. Il framework JavaScript Bootstrap mantiene un elenco dei suoi bug più esasperanti e alcuni dei peggiori rientrano in questa categoria.

Safari, ad esempio, a volte perderà il tocco delle dita sul testo nel tag (151933). A volte i menu non funzionano sull'iPad perché il browser ha spostato il rettangolo per cercare l'input (150079). A volte i clic innescano uno strano movimento nell'oggetto, che potrebbe persino sembrare fatto apposta da un designer tagliente (158276). Tutto ciò crea confusione quando il testo o le immagini sullo schermo non reagiscono come ci aspettiamo.

video

Il piano è sempre stato quello di semplificare la consegna di audio e video spostando la responsabilità all'interno del browser e fuori dal mondo dei plugin. Ciò ha eliminato i problemi di interfaccia, ma non ha rimosso tutti i problemi. L'elenco dei bug video è lungo e molti di essi sono fin troppo visibili. La voce Bugzilla 754753 descrive "principalmente macchie rosse e verdi che contengono varie immagini fantasma" e la voce Bugzilla 1302991 "" balbetta "per mancanza di una parola migliore."

Alcuni dei problemi più complessi stanno emergendo man mano che i browser integrano i vari meccanismi di crittografia progettati per prevenire la pirateria. Il bug 1304899 suggerisce che Firefox non scarica automaticamente il meccanismo di crittografia corretto (EME) da Adobe. È colpa di Firefox? Adobe? O forse uno strano proxy?

I bug video continueranno a dominare. L'integrazione di video web con altre forme di contenuto aggiungendo tag video a HTML5 ha aperto molte nuove possibilità per i progettisti, ma ogni nuova possibilità significa nuove opportunità per la comparsa di bug e incongruenze.

In bilico

La possibilità per la pagina web di seguire il movimento del mouse sulla pagina aiuta i web designer a fornire agli utenti suggerimenti su quali caratteristiche potrebbero essere nascoste dietro un'immagine o una parola. Purtroppo, gli eventi in bilico non sempre risalgono la catena il più rapidamente possibile.

Il nuovo browser Microsoft Edge, ad esempio, non nasconde il cursore quando il mouse passa sopra alcuni elementi di input (817822). A volte lo stazionamento non finisce (5381673). A volte l'evento hover è collegato all'elemento sbagliato (7787318). Tutto ciò crea confusione e scoraggia l'uso di un effetto piuttosto pulito.

Malware

Sebbene si sia tentati di attribuire tutta la colpa dei bug del browser agli sviluppatori di browser, è spesso ingiusto. Molti dei problemi sono causati da malware progettato per rappresentare utili estensioni o plug-in. In molti casi, il malware fa qualcosa di veramente utile mentre ruba segretamente clic o scambi in background.

Il problema è che l'interfaccia di estensione è piuttosto potente. Un'estensione può inserire tag e codice arbitrari in tutti i siti web. Nelle mani giuste, questo è molto interessante, ma è facile vedere come il nuovo codice dell'estensione possa urtare il codice dal sito web. Che cosa? Non volevi ridefinire il comportamento della $funzione?

Questo non è tanto un bug quanto un profondo problema filosofico con una caratteristica molto interessante. Ma da un grande potere derivano grandi responsabilità, forse maggiori di quelle che qualsiasi programmatore di estensioni può raccogliere. Il modo migliore per esaminare questo problema è rendersi conto che è l'unica area in cui noi, gli utenti, abbiamo il controllo. Possiamo disattivare le estensioni e limitarle a pochi siti Web in cui non ci sono problemi. L'API è un po 'troppo potente per l'uso quotidiano, così potente che si è tentati di chiamare le API delle estensioni i più grandi bug di tutti. Ma questo negherebbe tutto ciò che fa per noi.

Articoli Correlati

  • Oltre jQuery: una guida esperta ai framework JavaScript
  • Recensione: 7 IDE JavaScript messi alla prova
  • Sparatorie su HTML5: come si misurano Chrome, Safari, Firefox, IE e Opera
  • Recensione: 13 framework web primo Python
  • Il potere della programmazione pigra
  • Download: guida allo sviluppo della carriera per sviluppatori
  • 7 cattive idee di programmazione che funzionano
  • 9 cattive abitudini di programmazione che amiamo segretamente
  • 21 tendenze di programmazione calde e 21 fredde