Weird SVG mask behaviour on Chrome -


i encountered weird behavior thought simple svg mask:

<svg width="400" height="400">   <defs>     <mask id="mask" x="0" y="0" width="400" height="400">       <rect x="0" y="100" width="400" height="100" fill="#fff"></rect>         </mask>   </defs>   <g mask="url(#mask)">     <rect fill="#bbb" x="0" y="0" width="400" height="400"></rect>       </g> </svg> 

on chrome renders 3 gray rectangles (two of reacts scroll), while believe should 1 rectangle (firefox , edge renders so)

corresponding image (left: edge/firefox | right: chrome)

codepen: https://codepen.io/zworek/pen/ggbgpl

am defining wrong here or purely chrome's bug? if kind of bug: there workarounds?

my chrome version 60.0.3112.113 x64

this bug seems have been regression in chrome 60 - no longer appears in chrome 61. (probably should close question)


Comments

Popular posts from this blog

ios - MKAnnotationView layer is not of expected type: MKLayer -

ZeroMQ on Windows, with Qt Creator -

unity3d - Unity SceneManager.LoadScene quits application -