← Back to release summary

<foreignObject> will be a stacking context

Category

CSS

Type

New or changed feature

Status

Enabled by default (Chrome 67)

Intent stage

None

Summary

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

Standards & signals

• Specification: https://svgwg.org/svg2-draft/single-page.html#render-EstablishingStackingContex
• Firefox: Shipped/Shipping
• Safari: No signal
• Web developers: Positive
• Tracking bug: https://bugs.chromium.org/p/chromium/issues/detail?id=723076

Samples: with z-index: http://output.jsbin.com/takesol>Example of elements under with z-index: http://output.jsbin.com/takesol

View on chromestatus.com