SVG elements don't support CSS rem units for height/width attributes




2 years ago
8 months ago


(Reporter: mathews.kyle, Unassigned, NeedInfo)


42 Branch
Bug Flags:
webcompat ?

Firefox Tracking Flags

(Not tracked)


(Whiteboard: [webcompat])



2 years ago
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2490.71 Safari/537.36

Steps to reproduce:


I created an SVG element and set its height with rem units.

Actual results:

Heights set with em works as expected. Heights set with rem don't in Firefox but do in Chrome & Safari.

Expected results:

A height set with rem and em should render identically.
The SVG spec doesn't allow rem units in that attribute value.  We have an explicit comment about that in the code (nsSVGElement.cpp):

1273       // Special case: we don't want <svg> 'width'/'height' mapped into style
1274       // if the attribute value isn't a valid <length> according to SVG (which
1275       // only supports a subset of the CSS <length> values).

Cameron, is the SVG spec planning to change here, do you know?
Flags: needinfo?(cam)
Component: Layout → SVG
Summary: SVG elements don't use REMs correctly for height/width attributes → SVG elements don't support CSS rem units for height/width attributes

Comment 2

8 months ago
This just bit the mobile version of the Bing Fun & Games site. Also, since other browsers support rem width/height already (Chrome, Safari, Edge), I suspect that this ship has already sailed, and that we and the spec should probably change.
Flags: webcompat?
Whiteboard: [webcompat]
You need to log in before you can comment on or make changes to this bug.