Button ripple wash sometimes has 1px gap

[acdvorak]

What MDC-Web Version are you using?

0.27.0

What browser(s) is this bug affecting?

Chrome only (tested in v62) - Firefox and Safari seem unaffected

What OS are you using?

macOS Sierra 10.12.6

What are the steps to reproduce the bug?

1. View the Button demo page in Chrome
2. Mouse down (but not up) on a filled or stroked button ("Compact", "Secondary", and "Icon" seem to trigger the bug most reliably)

What is the expected behavior?

The ripple wash should cover the entire container.

What is the actual behavior?

There is a 1px gap on one or both sides of the ripple wash.

Any other information you believe would be useful?

[kfranqueiro]

I've only been able to repro this in Chrome as well. If I remove overflow: hidden then the ::after pseudo-element clearly spans beyond the boundaries of the button's surface, and if I change the text in the button the issue disappears, so I'm inclined to think there's some miscalculation going on internally in Chrome.

[kfranqueiro]

Finally managed a reduced test case. The second element demonstrates the issue.

If you remove the surface's border-radius or the pseudo-element's will-change: transform, the issue goes away.

Safari doesn't seem to exhibit the issue, only Chrome.

[kfranqueiro]

Unfortunately, the performance issue in #1665 will re-emerge if we remove will-change outright. #1872 is moving it from the pseudo-elements to the ripple surface itself, but this issue is still present then. Even when removed altogether, the issue is still noticeable specifically while the ripple is transitioning its scale, but then the issue goes away once it's scaled in fully.

I'm thinking of putting a few more examples in my test case, but then I think I need to file a bug with Chrome.

[kfranqueiro]

Filed https://bugs.chromium.org/p/chromium/issues/detail?id=799591. While testing for filing this bug, I realized this only happens on OS X, not Windows or Linux, which perhaps reduces its effect, but it's still noticeable and awkward on OS X.

[CyanoFresh]

Almost same (other side) on the Windows 10, Chrome 63.0.3239.132 x64
When zoom-in or zoom-out it fixes

[kfranqueiro]

This has been fixed in Chrome v67, so it will Just Work when that releases to stable in ~6 weeks. 🎉

Closing this, since there's nothing for MDC Web to do.