1276707 - SVG overflows with 1pixel when in max-width centered container

Status: RESOLVED WORKSFORME

(Core :: SVG, defect)

Description

[tozz]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.11; rv:48.0) Gecko/20100101 Firefox/48.0
Build ID: 20160529004021

Steps to reproduce:

This one is a bit "fun". When having an SVG inside a container that has margin: 0 auto and a max-width the left side will overflow with 1pixel and since the spec calls for overflow: hidden on non-root SVG icons using the full viewBox gets chopped off.

Tested the following in a clean html-file.

<section style="max-width: 400px; overflow: auto; margin: 0 auto;">
  <svg style="display: none;">
    <g id="icon-test"><path d="M32 0c-17.672 0-32 14.328-32 32s14.328 32 32 32 32-14.328 32-32-14.328-32-32-32zM47.828 42.172l-5.656 5.656-10.172-10.172-10.172 10.172-5.656-5.656 10.172-10.172-10.172-10.172 5.656-5.656 10.172 10.172 10.172-10.172 5.656 5.656-10.172 10.172 10.172 10.172z"></path></g>
  </svg>
  <div style="padding: 2rem;">
    <div style="height: 32px; width: 32px">
      <svg style="overflow: hidden;" viewBox="0 0 64 64"><use xlink:href="#icon-test"></use></svg>
    </div>
  </div>
</section>





Actual results:

Left 1 pixel side of the icon is chopped off.


Expected results:

Left 1 pixel side of the icon should be visible.

Comment 1

[ovidiu boca[:Ovidiu]]

Tested on Mac OS X 10.10 with FF Nightly 49.0a1 and I can reproduce it.

Comment 2

[Robert Longson [:longsonr]]

Attachment: reporter's testcase

Comment 3

[Robert Longson [:longsonr]]

Seems OK now.