material-components-web
material-components-web copied to clipboard
material-components
[Buttons FAB] Dark patch appearing in box-shadow of component on Chromium based browsers
Bug report
When switching tabs to a page with a FAB component, there is a chance that a randomly shaped dark patch appears within the box-shadow area.
Steps to reproduce
- Open Edge or Chrome
- Go to https://m2.material.io/components/buttons-floating-action-button
- Click on design
- Scroll down to the example
- Switch to and from the browser tab *
- Repeat this step until anomaly appears **
* Alternatively you can use Ctrl + '+' and Ctrl + '-' (or OS equivalent) repeatedly to produce the same outcome. ** If using the zooming method the anomaly disappear within a couple seconds, otherwise it seems to persist until the mouse is clicked
Actual behavior
Small dark patches appear within the bounds of the box-shadow of the FAB component
Expected behavior
box-shadow should not contain solid blocks of colour but instead have a gradient like effect
Screenshots
Your Environment:
| Software | Version(s) |
|---|---|
| MDC Web | 13.0.0 + whatever material.io is running |
| Browser | Chrome, Edge |
| Operating System | Windows 10/11 |
Additional context
When multiple instances of FAB icons on the page, it happens a much higher percentage of the time. When removing the box-shadow attribute it does not seem to happen Setting the component opacity to 0.99 also seems to prevent it happening. Not a solution but perhaps gives an idea as to why? At first it seemed it was limited to the bounding-box of the circle, but there have been times where it extends beyond this which seems to suggest it is limited by the box-shadows area
