mdc-ripple or mdc-toolbar: Ripple is being cut out

[pshe94]

What MDC Web Version are you using?

0.32.0

What browser(s) is this bug affecting?

Chrome 66.0.3359.33, Edge 41.16299.248.0 (EdgeHTML 16.16299)

What OS are you using?

Windows 10 1709

What are the steps to reproduce the bug?

1. Go to demo page of toolbar
2. Press one of the icons in toolbar that has ripple attached to it (for example Bookmark icon)

What is the expected behavior?

Ripple should not be cut out.

What is the actual behavior?

Ripple is cut out from right and bottom side (in Chrome) and top and left side (in Edge) by 1px. In Firefox 60.0b4 this problem doesn't occur.

Chrome:

Edge:

Any other information you believe would be useful?

This problem might be related to #1753, but I'm not sure.

[acdvorak]

I think this is a subpixel rendering issue.

--mdc-ripple-fg-size has a fractional value of 28.8px.

If you wrap the initialSize_ calculation in Math.floor(),
the resulting 28px seems to render correctly without getting cut off.

Change this line:

material-components-web/packages/mdc-ripple/foundation.js

Line 520 in 670c349

this.initialSize_ = maxDim * MDCRippleFoundation.numbers.INITIAL_ORIGIN_SCALE;

to this:

this.initialSize_ = Math.floor(maxDim * MDCRippleFoundation.numbers.INITIAL_ORIGIN_SCALE);

[williamernest]

Thanks for filing this issue. We've added it to our tracker.

[acdvorak]

This issue affects all unbounded ripples (e.g., icon-toggle).

To correct my earlier comment: There are actually two CSS properties that get multiplied together to determine the rendered size of the ripple:

--mdc-ripple-fg-size: 28.8px;
--mdc-ripple-fg-scale: 1.66667;

I'm guessing that the cutoff happens because 28.8 * 1.6666 = 47.99 which is not quite a whole number, so the browser tries to do subpixel rendering.

Surface element (48px):

::before pseudo-element (47.99px):

[touficbatache]

Hi @acdvorak, why not have a Math.round() around 28.8 * 1.6666? It would be 48