Extension:GuidedTour/Magnification

Approaches to "magnifying" an element

html2canvas

html2canvas is used to build an accurate image of an element on a canvas element with information available via the DOM. The contents of the canvas element of which can then be exported to a data URI and used as the background image of the magnifying glass element. The image can be scaled ("magnified") using the background-size CSS property.

This approach is far from ideal for a number of reasons: the size of html2canvas.js (37 Kb minified); scaling the image to anything over 125% of its original size makes it look "stretched"; the hover, focus, and active states of the magnified element can't be reproduced; and canvas landed in IE9.

$.fn.clone and window.getComputedStyle

The element and it's children are cloned with their computed styles (see window.getComputedStyle). The element can be scaled arbitrarily using either the non-standard CSS zoom property or CSS transforms.

This approach is better than the html2canvas approach insofar as it doesn't require a large third-party library. However it too can't reproduce the hover, focus, and active states of the magnified element; and CSS transforms landed in IE10 but are supported in IE9 with a vendor prefix.

$.fn.clone and minimising CSS selector specificity

The element and it's children are cloned and their styles are of such low specificity that they are applied to the clone elements. As in the window.getComputedStyle approach, the element can be scaled arbitrarily using either the non-standard CSS zoom property or CSS transforms.

This approach is the best of the three. Ideally, all styles that apply to the original element also apply to the magnified element. However, the amount of effort require to minimise CSS selector specificity is non-trivial at best and hard at worst.