All users were logged out of Bugzilla on October 13th, 2018

Percentage-constrained SVG elements in Flexbox containers render at different sizes on repaint




3 years ago
11 months ago


(Reporter: nchase, Unassigned, NeedInfo)



Firefox Tracking Flags

(Not tracked)



(1 attachment, 1 obsolete attachment)



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

Steps to reproduce:

See example here:

Here are the steps:

1. Create outermost <div>, set `display: flex;`
2. Create <div> inside
3. Create <div> inside, set `width: 75%` in CSS
4. Create <svg> inside, set `width: 100%` in CSS
5. Set an arbitrary property on the <svg> that will trigger a repaint (in the example above, I set a transparent 1px border on the svg)

Actual results:

If you repeatedly repaint, notice that the SVG gets smaller and smaller (by a factor of whatever the containing element's size is set to – 0.75 in this case) 

Expected results:

The SVG should stay the same size after a repaint

Comment 1

3 years ago
Created attachment 8749433 [details]

Comment 2

3 years ago
What do I need to do with the testcase?
Flags: needinfo?(nchase)

Comment 3

3 years ago
Hi Loic, if you force a minor repaint (e.g. by adding/removing border), notice that the SVG resizes by a factor equal to the percentage of the outer div whose dimensions are modified. Let me know if there's anything I can add or clarify, will have a computer in a few hours.


3 years ago
Component: Untriaged → Layout
Product: Firefox → Core


3 years ago
Duplicate of this bug: 1270577
Created attachment 8750478 [details]
testcase 1: hover & un-hover the SVG

Posting an interactive version of the testcase, which you can try out by hovering the SVG (which temporarily changes the border-width).

[--> obsoleting the previous version, which wasn't directly testable due to having a "//" comment which disabled the CSS that was supposed to be toggleable. This new testcase is based on that one.]
Attachment #8749433 - Attachment is obsolete: true
Ever confirmed: true
Version: 45 Branch → Trunk
[canceling needinfo, as my attached testcase demonstrates the bug.]

EXPECTED RESULTS: Hovering & un-hovering should restore the original rendering.
ACTUAL RESULTS: Hovering & un-hovering produces a progressively smaller SVG rendering.
Flags: needinfo?(nchase)
Flags: needinfo?(dholbert)

Comment 7

11 months ago
I have noticed that this bug still exists in Firefox 57 and is reproducible via the same procedure. Is there any appetite to fix this bug?
You need to log in before you can comment on or make changes to this bug.