"Eerst CSS, dan JS", riepen ze in koor
Bij één van mijn persoonlijke programmeerprojecten gebruik ik jQuery met de Dimensions plugin om een aantal DIVs dezelfde height te geven als de grootste DIV. Dit ging altijd goed, tot de komst van Firefox 3 en Opera 9.5.
In werkelijkheid was de grootste DIV van het stel 112 pixels hoog, maar volgens deze nieuwe browsers was dat soms 300 pixels. Soms, omdat het na een refresh of twee wel duidelijk werd.
Gezien de jQuery mailing list was ik niet de enige met dit probleem en na wat rondzoeken kwam ik daar dan ook een oplossing tegen:
Putting the <link> (or <style>) tags before <script> tags in the head can ameliorate the problem. Others have tested this and have found that they have access to those style properties
En ja hoor. Het verplaatsen van de <link rel=“stylesheet”> naar boven de <script>-tags deed het probleem oplossen.
Het is wel een vreemde oplossing. De CSS had in dit geval niets te zeggen over deze DIVs en eigenlijk hoort de JavaScript-code pas uitgevoerd te worden nadat de pagina helemaal klaar is met laden ($(document).ready()).
Misschien dat dit merkwaardige verschijnsel in een latere versie van Firefox en Opera nog verholpen wordt. Tot die tijd is het moraal van het verhaal: eerst de CSS inladen, dan pas de JavaScript.
0 reacties - Geplaatst in Firefox, Opera, jQuery