Change Details

Setting `opacity` and `transition` properties on icons results in a clipping of icons'/indicators' edge in Chrome under certain conditions. {F11226356} There has been articles about [[ http://www.nickpye.com/2013/04/03/css3-opacity-transition-image-wiggle-bug-in-mozilla-firefox/ | similar misbehaviour in Firefox ]] and I think, that I've come across such misbehaviour in production, but currently only one occasion is reproducible for me: Demo's icon section's IndicatorWidget in Chrome 62.0.3202.94 on Mac OS X on Retina display MacBook resolution. As soon as I switch to a different, external monitor (with higher resolution) the mis-rendering is gone as well.

Setting `opacity` and `transition` properties on icons results in a clipping of icons'/indicators' edge in Chrome under certain conditions. {F11226356} There has been articles about [[ https://stackoverflow.com/questions/15051557/very-difficult-to-solve-and-strange-css3-opacity-transition-issue-must-be-a | Chrome ]] and [[ http://www.nickpye.com/2013/04/03/css3-opacity-transition-image-wiggle-bug-in-mozilla-firefox/ | similar misbehaviour in Firefox ]]. I'm pretty sure, that I've come across such misbehaviour in production, but currently only one occasion is reproducible for me: Demo's icon section's IndicatorWidget in Chrome 62.0.3202.94 on Mac OS X on Retina display MacBook resolution. As soon as I switch to a different, external monitor (with higher resolution) the mis-rendering is gone as well. Promoting elements with `opacity` and `transition` property to a GPU composite layer seem to be a possible way out of this.

Setting `opacity` and `transition` properties on icons results in a clipping of icons'/indicators' edge in Chrome under certain conditions. {F11226356} There has been articles about [[ https://stackoverflow.com/questions/15051557/very-difficult-to-solve-and-strange-css3-opacity-transition-issue-must-be-a | Chrome ]] and [[ http://www.nickpye.com/2013/04/03/css3-opacity-transition-image-wiggle-bug-in-mozilla-firefox/ | similar misbehaviour in Firefox ]] and I think. I'm pretty sure, that I've come across such misbehaviour in production, but currently only one occasion is reproducible for me: Demo's icon section's IndicatorWidget in Chrome 62.0.3202.94 on Mac OS X on Retina display MacBook resolution. As soon as I switch to a different, external monitor (with higher resolution) the mis-rendering is gone as well. Promoting elements with `opacity` and `transition` property to a GPU composite layer seem to be a possible way out of this.