There is a bug in the Chrome browser that causes paint issues when using a CSS declaration with backdrop-filter: blur();
- https://bugs.chromium.org/p/chromium/issues/detail?id=986206
- https://bugs.chromium.org/p/chromium/issues/detail?id=1004536
PatternFly’s backdrop component uses a declaration that exploits this bug. The recommended workaround is to disable the backdrop component’s use of backdrop-filter, will disable the blur that the backdrop component provides. To disable backdrop-filter by setting its value to none, apply the following CSS in your application:
.pf-c-backdrop {
--pf-c-backdrop--BackdropFilter: none;
}
A working demo can be seen here - https://codepen.io/mcoker/pen/RwbZRee