Question

Let me explain a bit more, I am trying to have a large area (full screen) with a fixed size hole in it. The hole will follow the mouse around the screen. Think of having a scope focused on the page and the rest of the page grayed out.

I need this working efficiently in all browsers (inc IE 6).

My current solution uses 4 divs (top, right, bottom, left) and forms the hole in this manner. However this requires a repaint of the whole screen and this shows artifacts (divs have background image to gray out the area).

Is there a better (more efficient) way of achieving this that anyone may have encountered?

Note: The hole has to pass all events through to the elements below these divs.

Answer 1

Conclusions:

• Having 4 divs and resizing them appears to be the fastest approach
• Moving 4 divs is 4x slower
• Moving 1 container div w/ 4 inner divs is just as slow (4x slower than resizing)
• Using background-images is the only option that IE supports (as opacity filter (alpha) is too slow for whole page size divs).
• background-image has to be solid (i.e. 1px solid colour with semi-opacity). Trying to get a solid color / semi-opaque color to achieve blur will cause screen repaint artifacts (even when not resizing/moving) divs.