I’m currently building a rather ambitious interactive wall for a client that must be compatible with IE7 upwards.
It’s basically a large, draggable grid of hexagons drawn using Raphael.js. The size of the grid is dependant on screen size but in most cases will not exceed ~2500 SVG elements.
When dragging the containing DIV in modern browsers, including IE9, it’s smooth as butter. In IE7 and IE8 this is not the case!
Having to support older browsers means no CSS3 support and therefore no CSS Transform support. As a result, I’m having to update CSS left and top properties to position the element.
Is there a more efficient way of moving large elements in these older browsers? I have noticed that dragging slowly is quite smooth, whereas dragging quickly kills things. I’ve tried limiting the number of times the drag event is dealt with each second, but this doesn’t have much of an effect.
My main options are to disable the dragging in IE7/8 or to decrease the size of the main element. Neither of these are ideal, but so far these are the only options I have.
I think it’s a long shot, but any suggestions would be great!
Answering my own question here, I guess if anyone else has a similar problem they might stumble across this and it’ll be helpful…
In my drag function (movemove event), I had failed to include stopPropagation or preventDefault() calls. Added these and performance improved dramatically!