Hi,
I'm trying to track down a performance problem I have in a web-page where I have a div containing two non-overlapping sub-divs, one with a Google Maps control loaded, and the other has jQuery UI items like an Accordion for example.
In Firefox, the Accordion transition effects update at the same (slow) framerate as the Google Maps control, just as if the animation events force a re-draw of the Google Maps div. This does not occur in Chrome, but it does occur in Firefox 3.5 and IE8. My Google Maps control is customized to include some heavy markers which is why the Maps itself is sluggish, but the problem is that it affects the jQuery UI effect animation speed.
The Firebug profiler does not show anything odd that I can find - it is as if it profiles the jQuery animation callbacks etc and these run at full speed but my guess is they are scheduled sluggishly by the browser.
What I'm trying to figure out is if the problem is due to the browser trying to redraw/refresh the GMaps div whenever the jQuery UI div is changed, or if perhaps some events from the UI side is propagating up to the parent div then down again to the GMaps div? I'm sorry if I'm not very experienced with javascript event propagation..
The issue might not even have anything to do with jQuery. Perhaps Firefox 3.5 is just bad at optimizing redraws or something.
For the record, I'm using Raphael (a SVG-generating JS-library) for the GMaps markers, and it can get a bit slow when you have hundreds of SVG items in the div. It's ok for my GMaps app to be slow when it is dragged around, but the jQ UI elements get annoyingly slow.
Thanks for any suggestions, I'm sorry I haven't (yet) a minimal example showing the problem that I could post.
/Bjorn