-
Notifications
You must be signed in to change notification settings - Fork 222
Limitations
Christoph Burgmer edited this page Mar 8, 2015
·
27 revisions
Limitations of rasterizeHTML.js due to implementation details or browser bugs. Also see issues for open issues. Brower issues that have a workaround implemented are listed under Browser issues.
- 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 that are created through JavaScript are not loaded (e.g. "lazy-loaded" images). To work around these resources could be provided inline instead.
- 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).
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)
- The default font size (i.e. if none other set) seems to be around 0.001px (maybe https://code.google.com/p/chromium/issues/detail?id=348436 and https://bugs.webkit.org/show_bug.cgi?id=68090).
- 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 is not able to read back from the canvas (when using data:uri)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)- While
font-kerning: autois 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 applyfont-kerning: normalto the document if the exact same treatment is required. - The
sans-seriffont-family will not be applied and Chrome falls back to using theseriffont (https://code.google.com/p/chromium/issues/detail?id=167760) - Media queries in
emwill not work and need to be expressed inpxinstead (https://code.google.com/p/chromium/issues/detail?id=404470).
- Webkit is not able to read back from the canvas (https://bugs.webkit.org/show_bug.cgi?id=17352)
- 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) - 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)
- No support at all up to IE11 due to missing <foreignObject> support with SVGs (test case http://jsfiddle.net/cburgmer/d4MS6/2/). Currently in development.