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
Post a Comment