Hello, I am using jquery and jquery ui quite along time and I never had any performance issues until my last project. It is a kind of grid which is movable in a viewport.
What do I have.
The viewport is an area with the size of 500 x 500 pixel (overflow hidden) in there is a container element which has the dimensions of 6000 pixel in width and 500 pixel height. This element is draggable or moveable. Inside of this container I have certain amount of rows with floating cells, so that this will create a grid, like a timeline for schedules.
The main issue is here that the animation and dragging performance in FIREFOX (3.5) is more than bad (moving the entire container). All over browsers including IE6 and 7 are more than twice as fast. Chrome and Safari are a different league :).
I have done several things to speed it up. So what i tried is to reduce the dom elements inside of the grid. Each cell looked like that.
a row is a list
ul
a cell
li > div > text
this structure makes it faily easy to put borders around cells and avoid spacing, padding and width issues with different browsers.
by killing the div element, firefox seems to be faster. we are talking about 500 cells inside of the dragging container. by reducing one element of the cell u kill 500 dom elements. It is faster but not in way which would make me satisfied.
So my question is now is this a known issue with firefox or is this related jquery(ui) and its animation component, and what could I do to solve it. I am happy about every suggestion or hint. I cant show u the page cause it is closed.
Thx in advance
Tee