1612905 - rem units in svg elements don't work

Status: RESOLVED FIXED

(Firefox for Android Graveyard :: General, defect, P5)

Description

[mat.leoon]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.130 Safari/537.36

Steps to reproduce:

I used width="2rem" attribute on inlined svg in html

<svg viewBox="0 0 20 14" width="2rem" class="Navigation__MenuIcon-sc-1n9e3ao-0 kCMfHD"><path d="M1 7h18M1 1h18M1 13h18" fill="none" stroke="#302f40" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path></svg>

Actual results:

it behaves as if no width was specified at all (which in case of firefox is becoming of huge dimensions)

Expected results:

rem units should be accepted as any other working units like px and em

Comment 1

[Stefan Arentz | :st3fan | ⏰ EST | he/him]

I'm not sure if this is a valid bug. Does it actually make sense to have both viewBox and width?

Comment 2

[mat.leoon]

Sure. viewBox in this case is used to define the proportions of this svg. It will make sure that when I pass width, it will set the height to proper value.