Je viens de voir que parfois, surtout Chrome, buguait sur ce script : le calcul des tailles des images avait déjà commencée que les images n’avaient pas encore toutes chargées dans le navigateur.

Il faut impérativement lancer le JS quand la page a finie de charger (ou au moins les images). On fait ça avec un onload :

window.addEventListener('load', tileImages);

Si ça marchait dans Firefox et pas toujours dans Chrome, c’est parce que la fonction JS « getComputedStyle » ne fonctionne pas pareil.

Un style CSS, par exemple une largeur, se calcule en 3 étapes :
– 1) la valeur déclarée : c’est la valeur retenue (selon les règles de spécificité CSS) une fois que le CSS est calculé.
– 2) la valeur calculée : quand on déclare une valeur en pourcent, le navigateur transforme ça en pixels (ex : largeur du bloack parent = 200px, et l’enfant fait 50%, la valeur calculée est 100px).
– 3) la valeur retenue : quand il y a plusieurs niveaux d’imbrication de valeurs relatives (%, em, en…), il faut parfois recalculer certaines zones.

À l’issue de la 3e étape : chaque élément de la page dispose alors de tailles, et positions finales sur la page. Le rendu est alors effectué.

Sauf que… pour certaines propriétés CSS, en particulier « width » et « height », le « getComputedStyle » retourne la valeur calculée (étape 2) et non la valeur finale (étape 3), ce qui pose un problème dans le cas présent.

Chrome et Firefox ne renvoient pas toujours les mêmes valeurs à cet endroit précis : je crois que Firefox refait un rendu en plus de tout ça (c’est pour ça que ça marchait dans Fx et pas Chrome).

Tout ceci devient assez compliqué. Mais savoir commence fonctionne un navigateur en internet permet parfois de s’en sortir.
— (permalink)