Limitations

Limitations of rasterizeHTML.js due to implementation details or browser bugs. Also see issues for open issues. Browser issues that have a workaround implemented are listed under Browser issues.

Pull request for working around those limitations are welcome.

General

• All resources (HTML page, CSS, images, fonts and JS) that are needed for drawing the page can only be loaded if from the same origin, unless techniques like CORS are used.
• External resources created through JavaScript are not loaded (e.g. "lazy-loaded" images). To work around these resources could be provided inline instead.
• Options hover, active, focus will only apply user specified pseudo-class styles and not user-agent specific presets. This e.g. includes the button outline in Chrome or the padding-left offset in Firefox on active state.
• Manipulating scrollTop or similar attributes will have no effect on the visible viewport area.

Currently unsupported HTML

• Neither the content of a canvas nor its actual size are correctly rendered.
• iframes are not supported.
• External background-images on inline style declarations are not rendered (see inlineresources).
• Images defined in srcset are not loaded (see inlineresources).
• Media queries defined on link elements are ignored (see inlineresources).
• Media queries defined on import rules are ignored (see inlineresources).
• HTML elements may only contain colons if the prefix is treated as a namespace and has it declared as it would be in XHTML (see xmlserializer).

Browser issues

All

• Background set on HTML or BODY are generally propagated up to be set on the whole canvas. This currently is not applied to documents inside foreignObject and thus the background is only applied to the element themselves (only spanning the size of the actual HTML/BODY element). (Firefox issue https://bugzilla.mozilla.org/show_bug.cgi?id=1143405)

Firefox

• Executing JS that accesses the HTML5 history.pushState fails due to issue https://bugzilla.mozilla.org/show_bug.cgi?id=777526
• Media queries trigger for the wrong size on retina displays for SVG in an <img> (https://bugzilla.mozilla.org/show_bug.cgi?id=986403, https://bugzilla.mozilla.org/show_bug.cgi?id=1056517)

Webkit origin

• SVGs will not render (SVGs inside a <foreignObject> of another SVG are not rendered when included via an <img>, see https://github.com/cburgmer/rasterizeHTML.js/issues/39)
• The zooming option will not work correctly for HTML elements that generate a stacking context (e.g. position, transform, opacity, due to https://code.google.com/p/chromium/issues/detail?id=467308).
• Composite transforms are not rendered correctly (see https://github.com/cburgmer/rasterizeHTML.js/issues/85).
• Chrome & Safari handle tag name selectors in lowercase, matching any element independent of letter case. Firefox however only applies case insensitivity to HTML elements. (see https://github.com/cburgmer/rasterizeHTML.js/issues/91)
• CSS properties are automatically converted into their shorthand counterparts if available (e.g. border-style to border) and it seems that this behaviour exposes an issue when the original property's value may become invalid when included in the shorthand form (see https://github.com/cburgmer/rasterizeHTML.js/issues/90).

Chrome

• While font-kerning: auto is the default setting, Chrome can decide to treat kerning for normal text and text rendered in the SVG differently (see https://github.com/cburgmer/rasterizeHTML.js/issues/77). An easy work around is to apply font-kerning: normal to the document if the exact same treatment is required.

Safari

• Webkit is not able to read back from the canvas (https://bugs.webkit.org/show_bug.cgi?id=17352)
• Images (img & background-img) do not load under unclear circumstances. It might help to preload the relevant images, e.g. as background image in a div with height 0. (https://github.com/cburgmer/rasterizeHTML.js/issues/81)

IE

• No support at all up to IE11 due to missing <foreignObject> support with SVGs (test case http://jsfiddle.net/cburgmer/d4MS6/2/).

Microsoft Edge

• ...