Safari issues with javascript + css

Question

I have some strange behavior going on with safari, im using the jQuery.GridLayout plugin and css for styling.

Just for some context, this website layout is a simple header followed by the content which are a collection of blocks (each block is a div) positioned by the javascript and rearranged every time the window is re-sized.

When I direct safari to the website url all the blocks overlap to some degree (like 50%) but as I re-size the window if they have to move, automatically all goes to the correct place and only breaks if I refresh the page.

So it seems that loading the page is messing it up either because something fails to register or because something does not happen until I re-size the window.

As anyone experienced such behavior within safari?

It works perfectly in firefox and opera, its an valid html 4.01 transitional page and the css is also validated (wc3 wise that is).

I know that publishing the code is invaluable to sort this kind of issues but this is a production project and I'm obliged not to it.

Either way I appreciate any advice on were to start looking?

How do one goes about debugging this issues in safari?

Thank you.

Answer 1

If you aren't able to post the actual code of the page for us, you might find your solution while trying to reproduce the problem without your specific content. In the past, I've solved some of my own problems while trying to generate a page that shows the problem to post on IRC / SO. If you are able to reproduce the problem without your content, post it for the community, and an answer will be much easier to find.

My shot-in-the-dark guesses lead towards:

• You may find that one of your content blocks is causing the issue.
• You may find that a different library you are using is causing the issue.
• Some javascript code for your layout may be running before everything is ready / filled in. From my memory, Safari is quick to display pages before images are loaded for instance.
• Perhaps you need to specify the an exact width/height of some of your Grid Containers.

Answer 2

Safari fires DomReady before linked resources are loaded. This race condition regarding calculating sizes of elements defined in CSS can usually be avoided by loading your CSS resources before any JavaScript (eg: make sure the tags appear in the before ANY tags (which are blocking, but give a change for CSS to load asynchronously). Worse case scenario, move your blocks to the last element in , leaving your tags above.

CSS concatenation of multiple files (if you have them) is also recommended.

Answer 3

Small update:

(new update at bottom)

http://www.howtocreate.co.uk/safaribenchmarks.html

And also something that is working is this small script:

<script language="JavaScript"> 
 // CREDITS: 
 // Automatic Page Refresher by  Peter Gehrig and Urs Dudli www.24fun.com 
 // Permission given to use the script provided that this notice remains as is. 
  // Additional scripts can be found at http:
  //www.hypergurl.com 
 // Configure refresh interval (in seconds) 
 var refreshinterval=20 
 // Shall the coundown be displayed inside your status bar? Say "yes" or "no" below:
 var displaycountdown="yes" 
 // Do not edit the code below 
 var starttime 
 var nowtime 
 var reloadseconds=0 
 var secondssinceloaded=0 
 function starttime() { starttime=new Date() starttime=starttime.getTime() countdown() 
 } function countdown() { nowtime= new Date() nowtime=nowtime.getTime()      secondssinceloaded=(nowtime-starttime)/1000 
 reloadseconds=Math.round(refreshinterval-secondssinceloaded) if      (refreshinterval>=secondssinceloaded) 
  { var timer=setTimeout("countdown()",1000) if (displaycountdown=="yes") 
  { window.status="Page refreshing in "+reloadseconds+ " seconds" 
  } } else { clearTimeout(timer) window.location.reload(true) } }            window.onload=starttime 
 </script>

I find it odd that a refreshing script solves the issue in safari, but if i manually refresh the page the page havoc ensues...

########UPDATE ##########

Well I finally got some more time to work on this and after doing some reading a rather obvious thing came to my mind, let the content load and then format it, so for now all of my js sits between </body> and </html>.

Its not perfect since now you can catch a glimpse of the content without being properly placed when the page first loads.

Maybe ill try calling the js a second time after a few ms have passed of loading.

I know this was proposed a bit upper the thread I just needed time to get my hands dirty thanks all, Ill keep updating till I get it solved in a more proper fashion :)