material-components / material-components-web

Modular and customizable Material Design UI components for the web
https://material.io/develop/web
MIT License
17.14k stars 2.15k forks source link

[Buttons FAB] Dark patch appearing in box-shadow of component on Chromium based browsers #7993

Open Joosh-Booth opened 1 year ago

Joosh-Booth commented 1 year ago

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

  1. Open Edge or Chrome
  2. Go to https://m2.material.io/components/buttons-floating-action-button
  3. Click on design
  4. Scroll down to the example
  5. Switch to and from the browser tab *
  6. 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

image image

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