Odd glitch with opacity / bootstrap modal

user_613846 0
Viewed 1235

As of few days ago users started reporting some odd graphics glitches with the modal backdrop. I've seen it on a couple of devices and haven't been able to get to the bottom of it - via inspector I can see that the Opacity is creating the glitch but seems very unusual. Also sometimes after switching tab and going to the original one the glitch is not there anymore.

Thoughts? has anyone encountered something like this before? (Please ignore the red strikethroughs)

enter image description here

bootstrap-modal google-chrome modal-dialog css
4 Answers

I was seeing the same issue after Chrome updated to 61. To workaround this I temporarily swapped the opacity on modal backdrops for rgba(0,0,0,0.5) background. Note that rgba background is unsupported in IE8 so you'll either want to add a fallback or not utilize the workaround in that environment.

user_86582090

I added style and it helped to avoid this bug

.modal-backdrop {
  opacity: 1 !important;
  background-color: rgba(0,0,0,0.5) !important;
}
user_62980550

i'm seeing the same issue (black squares/artefacts) as well (since Chrome 61). I figure it's a rendering issue in Chrome. As it is annoying to our customers we are looking for a workaround but other than removing all opacity styles we have no solution yet.

user_8745800

Removing glitches / patches in bootstrap model fade

Check if there is border in model content and change it to none, it worked for me .

.modal-content {
    background-clip: padding-box;
    border: none;
}

Sample Image

user_88607380
Related