Background button flickers when hovering over the ng-bootstrap modal in Google Chrome

Question

I use ng-bootstrap nodal in my angular app and I use Google Chrome browser. When I click a button to open the modal, I see the button that I used for that action turns to a white background and then starts blinking when I hover over the close (X) or any other button in the modal. After a while it stops. I don't see this happening in Microsoft Edge.

I tried to see whether the style of the button or its containing element changing, but it is not.

Is this a bug in the Google Chrome browser? Or is there anything else that I need to look at to fix this.

Answer 1

Possibly related question here:

Chrome is behaving strange bootstrap modal

I get strange screen artifacts and element ghosting when I open modals and/or hover over the buttons in the modals. If I disable hardware acceleration in Chrome the problem goes away.

I also only seem to get the problem on my second monitor - it works fine on my main laptop screen but not when I move the window to the second monitor. As soon as I drag the window back to the laptop screen the problem goes away. I assume hardware acceleration/driver issue - but works fine in other browsers. Cannot expect my users to know this.

Update: Adding backgrounds does not fix it for me. The problem can also go away if I change the components on the page under the modal. For example if I replace ng-bootstrap tabs with material2 tabs I don't get problems (on this specific page at least). Maybe to do with the non-standard HTML elements introduced by Angular components?

Answer 2

i also had this problem and when adding a background to elements that inside the container do this black dots it is fixed

Answer 3

I had the same problem on newer versions of chrome (>59 or 60). I solved it by setting a background color on the parent element. It seems that Chrome doesn't like no more hover on element when background colors are not set.