Overflow: hidden not applying to a pseudo element in Chrome

Maybe we should all read more about css will-change property, you can find one useful article here. It is an experimental technology, currently supported by Chrome, Firefox and Opera.

The will-change CSS property provides a way for authors to hint browsers about the kind of changes to be expected on an element, so that the browser can setup appropriate optimizations ahead of time before the element is actually changed. These kind of optimizations can increase the responsiveness of a page by doing potentially expensive work ahead of time before they are actually required.

It helps your browser to render element transitions using GPU by preparing the layers before the transition occurs. It helps in this case, we just have to be careful with setting this property. We should not set will-change to every element on page, but should target specific elements in moment when transition is about to happen. That is why we should use :hover state on parent element like this:

.will_change:hover *,.will_change:hover *:before,.will_change:hover *:after {    will-change: transform, opacity;}

.will-change is the class of parent element, you can see details on updated CodePen here.

If we would like to analyze when and why this happens in Chrome, than I can tell you what I noticed:

• It does not happen randomly as boltclock wrote above, but only while browser renders other transition same time. Only after hovering the Menu above (while that animation is still not finished) and we started new one over the button. On your example, if you hover the Button from below or sideways, than you can see no glitches.
• My guess is: using will-change forces graphic acceleration and that saves CPU for making mistakes. Similar trick with -webkit-transform: translateZ(0px) helped with text rendering on Chrome.