Wikimedia Bugzilla is closed!

Shields/phantoms are currently recursively applying to protected elements and positioning additional elements inside them. This causes 2 major problems:

1. Very slow, the CSS selectors use * and adding and controlling all these elements takes a lot of time as well.

2. We are limited to a single rectangle per protected node, which for inline elements is especially problematic since they are meant to wrap.

Using getClientRect and getClientRects (for inline stuff) can give us bounding box information that we can then cache, and render polygon click blocks for using an SVG layer. SVG's pointer-events: none works across browsers (unlike using this property in HTML) so we can control which elements in the SVG rendering block or pass through.