search

cburgmer / rasterizeHTML.js

Renders HTML into the browser's canvas
http://cburgmer.github.io/rasterizeHTML.js
MIT License
2.45k stars 219 forks source link

Content with negative z-index disappears #94

Open cburgmer opened 9 years ago

cburgmer commented 9 years ago

It looks like while Firefox and Chrome would both render elements with e.g. z-index: -1 nicely (example http://jsfiddle.net/cburgmer/sqaz85ac/), this fails here. The content will disappear behind the body element if this is not transparent.

Workaround: Adding a rule body { position: relative; z-index: 0; }.

cburgmer commented 9 years ago

The fix proposed above (or any fix setting a stacking context) will not work due to an issue in Chrome + Safari (https://code.google.com/p/chromium/issues/detail?id=467308).

cburgmer commented 9 years ago

It looks like all of the browsers do not treat the root element (HTML) as the root element when embedded inside a foreignObject context. Per spec (http://www.w3.org/TR/CSS2/visuren.html#propdef-z-index) the root element should have its own stacking context and thus apply the correct stacking rules for negative z-index values.

In addition the background of the BODY element should propagate to the HTML element if the latter has no background (http://www.w3.org/TR/css3-background/#special-backgrounds) which also does not apply here. Only then will the body stacked above (z-index=0) have a transparent background and allow the negative z-index'ed element to shine through.

A discussion on that can be found here http://stackoverflow.com/questions/24746288/document-stacking-context-root-element-body-or-html.

To fix this issue we need to

  1. Create a stacking context for the HTML element (e.g. html { position: relative; z-index: 0; }, with implications in Chrome + Safari, see above)
  2. Propagate the background of the body to the root element
cburgmer commented 9 years ago

Issue in Firefox filed under https://bugzilla.mozilla.org/show_bug.cgi?id=1143417