<foreignObject> will be a stacking context

SVG2 specifies that <foreignObject> to be a stacking context (*). Previously, Chrome did not follow the SVG2 spec. Making <foreignObject> a stacking context allows developers to place HTML content underneath a <foreignObject> without confusion. For example, it wouldn't make much sense to place content at z-index:1 above the containing SVG. Gecko and Edge already implement this behavior. (*) https://svgwg.org/svg2-draft/single-page.html#render-EstablishingStackingContex

Demo

Specification

Editor's draft

Status in Chromium

Blink>SVG


Enabled by default (tracking bug) in:

  • Chrome for desktop release 67
  • Chrome for Android release 67
  • Android WebView release 67

Consensus & Standardization

  • Shipped
  • Shipped
  • No public signals
  • Positive

Owner

Last updated on 2018-04-05