2

Background:
I've got a HTML page that uses a WebGL canvas to display some 3D content. Overlayed are multiple <div> that are placed by inline CSS with position: absolute and relevant dimensions for top and left.

Question:
When I update the view on the 3D content (e.g. rotate everything a bit) I also need to move all the overlayed <div> so that they seem to stay in the same place in the 3D space.
How can I update the web page, so that only one repaint will happen?

When I'd first repaint the WebGL and then iterate over n <div>, I'd get n+1 repaints per frame. That's not very nice during an animation that should get at least 30 fps...

Note:
I also know the other questions like:
Is there a way to apply multiple CSS styles in a batch to avoid multiple reflows? - but that talks about combining multiple CSS parameters in one element (I'm using that already here to get from 2 n+1 down to n+1...)
Multiple DOM updates in a single redraw/reflow? - but I'm not sure if that could help here as I guess I'd also have n+1 redraws...

PS: jQuery is allowed, as it's already used in that project.

Community
  • 1
  • 1
Chris
  • 3,265
  • 5
  • 37
  • 50
  • 1
    if you just do everything without yielding to the event loop and without accessing properties that require the engine to run the reflow http://stackoverflow.com/a/1278213/1026 , you shouldn't see multiple reflows or repaints. Do you or do you just expect to? – Nickolay Mar 18 '12 at 17:12
  • I expect to. So thanks for the hint that I'll research further now – Chris Mar 24 '12 at 11:43

1 Answers1

2

If relative each to other position of your divs is not changing, you can do next:

  1. Create one parent with position absolute/relative/fixed
  2. Append all your divs to this parent and set in CSS their position (position will be relative to parent)
  3. Move parent div and change style for parent div
Rustam
  • 1,875
  • 2
  • 16
  • 33