search

PolymerElements / iron-iconset-svg

Represents a source of icons expressed as a collection of inline SVGs
https://www.webcomponents.org/element/PolymerElements/iron-iconset-svg
37 stars 34 forks source link

Icons rendered in RTL with Shadom DOM transform around the wrong origin #80

Closed dlockhart closed 6 years ago

dlockhart commented 6 years ago

Description

When <iron-iconset-svg> is used in a page with right-to-left (dir="rtl") direction, with an icon that mirrors itself, on a browser which supports native Shadow DOM, the icon is mirrored from the incorrect origin. This results in it being positioned outside its container.

Right-to-left (incorrect origin) iconset-rtl

Left-to-right (correct origin) iconset-ltr

Expected outcome

The icon should mirror along its center horizontal and vertical axes.

Actual outcome

The icon mirrors

Live Demo

Make sure you're using Chrome: https://jsbin.com/jotojuzuru/edit?html,output

Steps to reproduce

  1. Create an <iron-iconset-svg> with rtl-mirror="true"
  2. Inside, put an icon that requires mirroring using the mirror-in-rtl="true" attribute
  3. Use that icon inside a page with right-to-left direction (dir="rtl" on the <body> or <html> elements)
  4. Visit the page in a browser that supports native Shadow DOM
  5. Notice that the icon is mirrored along the incorrect origin
  6. Switch to shady DOM and notice the origin is now correct

Sample code:

<link rel="import" href="../iron-icon/iron-icon.html">
<link rel="import" href="../iron-iconset-svg/iron-iconset-svg.html"/>
<iron-iconset-svg name="example" size="18" rtl-mirroring="true">
  <svg>
    <defs>
      <g id="chevron-right" mirror-in-rtl="true">
        <path d="M5.49 15.61a1.5 1.5 0 0 1-.1-2.12L9.47 9 5.39 4.51a1.5 1.5 0 1 1 2.22-2.02L12.62 8A1.474 1.474 0 0 1 13 9a1.524 1.524 0 0 1-.38 1l-5.01 5.51a1.5 1.5 0 0 1-2.12.1z"/>
      </g>
    </defs>
  </svg>
</iron-iconset-svg>
<div style="display:inline-block;border:1px solid red;">
    <iron-icon icon="example:chevron-right"></iron-icon>
</div>

Browsers Affected

Possible Fix

Add transform-origin: center; to the CSS which is performing the transform.

bicknellr commented 6 years ago

I think this is actually a Chrome bug. This rule in the UA stylesheet for SVG doesn't match <svg> elements which are the children of ShadowRoots: it should also have :host(html|*) > svg.

dlockhart commented 6 years ago

Isn't @robdodson playing around in the Chromium code these days? :focus-visible can wait... ;)

bicknellr commented 6 years ago

Filed as https://crbug.com/808228.