Tuesday, October 14th, 2008

MozAfterPaint: Being able to get a callback event on repaint

Category: Firefox, Mozilla

John Resig put together a nice usage of MozAfterPaint, the new Firefox event that will call back letting you know when a repaint operation has happened:

The event object contains two properties: .clientRects and .boundingClientRect, both of which refer to the result of the associated DOM methods.

In a nutshell, boundingClientRect gives you a single rectangle encompassing the entire area in which a paint operation could’ve taken place whereas clientRects gives you a number of rectangles, each encompassing an individual area that was drawn.

To test this I created a quick demo using CNN.com (only works in the latest Firefox nightlies).

John creating a simple tracking script that uses the new event to show where you have been.

kourge reminded us of the related Flash event showRedrawRegions.

Robert O’Callahan mentioned a use for the event when he discussed SVG bling that made it into the first 3.1 beta.

David Hyatt put in a WebKit patch to add support for CSS transitions on some SVG properties.

Posted by Dion Almaer at 5:02 am

2.9 rating from 14 votes


Comments feed TrackBack URI

This could be cool for performance testing, ie., literally highlighting how JS may cause larger reflow operations than you might intend and perhaps helping find more optimal ways to update the DOM.
I think the flash player’s context menu includes “show redraw regions” as one of the items, which is neat.

Comment by Schill — October 14, 2008

Can’t you basically do this with the DOMSubtreeModified event? Am I misunderstanding or is this just sugar around that event?
Incidentally, I’d love to be able to get an event specifically when an element’s dimensions change. Does anyone know of anything like that?

Comment by eyelidlessness — October 14, 2008

Perhaps this (untested)?

Comment by TNO — October 14, 2008

@TNO: Unfortunately, only IE supports onresize firing for element dimension changes; all other browsers only fire onresize when the window changes dimensions, regardless of where the event is attached.

Comment by eyelidlessness — October 14, 2008

After a little more research, perhaps onpropertychange for IE, and addEvent(“DOMAttrModified”…..) for the rest

Comment by TNO — October 14, 2008

I’ve been using DOMSubtreeModified and comparing dimensions to a cache, but this performs badly. (It does perform better with the check against a cache than without, to be clear.) :(

Comment by eyelidlessness — October 15, 2008

Leave a comment

You must be logged in to post a comment.