Clip paths, "layers" and reflow/repaint efficiency
I have been trying to work out why my JS animation of an SVG image (with about 100 elements) is not as smooth in Firefox (21.0; beta 22.0 seems a bit better) as it is in Chrome, IE10 and Opera.
The paint flashing tool showed that FF was frequently painting larger areas than Chrome was. I also noticed that the few elements that were appended to groups with clip paths always moved smoothly even though the other elements moving at the same time were stuttering. Introducing more (redundant) clip path attributes into the tree has improved the animation.
I am interested to know if clip paths create "layers" in FF that can improve the efficiency of reflow/repaint processes. Are there any other ways of achieving this that are perhaps even more efficient?