http://jsfiddle.net/1aeur58f/1/
<!-- Button trigger modal -->
<button type="button" id="mymodal" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
Hello Bootstrap Team,
I have face issue on bootstrap modal background issue? flickering background pixels.
I have placed StackOverflow for more details below link:
https://stackoverflow.com/questions/46501097/background-pixels-flickering-on-bootstrap-modal
Please update me... if you got any solution...
Thanks,
Jagdish Parmar
changed .fade.in opacity property on bootstrap.min.css from 1 to 0.99: .fade.in{opacity:0.99}
and that solved the problem while a better solution appears.
EDIT:
try this on bootstrap.min.css
.fade.in{opacity:1;-webkit-backface-visibility: hidden;}
@addyosmani: is this a known issue?
Whoever has this issue: can you please try the beta or canary build and see if the issue happens there too? Chances are it's already fixed.
Personally I don't use Chrome on my main machine, but I could test a couple of things with @Johann-S.
Requirements:
Result:
This results in visual glitches like this one and the ones mentioned in #24258.
Workaround:
Whoever is affected, you should see that the problem goes away if you disable hardware acceleration.
/CC @addyosmani: can we escalate this issue? It seems a lot of people are affected :/
I've been testing this across all browsers and all OS. As reported above, it's only Windows, Chrome, and GPU acceleration enabled.
Has anyone created an upstream bug with Chromium/Chrome?
@bryanspears: I haven't, but that is why I CC'ed @addyosmani above hoping to speed things up.
Regardless, if you make an issue upstream please comment here with the link.
Thanks!
Same here. This is quite bad... I cannot post a link, unfortunately.
Setting opacity to 0.99 does not solve the issue in my case.
I managed to workaround this issue by changing .modal-backdrop.show opacity to 1 and background-color to rgba(0,0,0,0.5)
That seems to works for me also... Note: _.modal-backdrop.in_ instead of _modal-backdrop.show_ in my case. Thank you!
Guys, all the "solutions" aren't real solutions, but merely workarounds like the one I mention above about disabling hardware acceleration.
The issue needs to be reported to Chrome and fixed there.
So, please don't post such comments, they don't help resolve the issue properly.
Hey folks. Is there a crbug.com bug report filed for this issue that we can chase up on our end? Happy to once there is. It's usually fastest to file there with a reproduction so we can get someone on our graphics teams to take a look (I'm buried in GH issues and didn't see this before I'm afraid).
I'm not otherwise aware of a bug filed for this issue. We have had some reports of color profile related issues with the latest Chrome stable on Windows but this looks completely different.
Chrome for Mac has a similar but difficult to reproduce issue with Bootstrap modals. I have not tried to reproduce with a bare bones page but so far have found the issue only occurs when sticky.js is present and seems to only appear when viewed at a medium window size. This causes a white strip in the center of the page with ghosted content along side the original.
It occurs between <1170px and >1024px widths
Closing as per the Chromium bug report.
If anyone has any issues, please report them there.
https://bugs.chromium.org/p/chromium/issues/detail?id=770701#c27
So glad I found this issue posted, I've been going crazy for the last couple of weeks thinking yet another part of my work PC was starting to fail (only had the PC for about 10months). Nice to see it is a Chrome bug, according to the Chrome issue tracker it is fixed in the latest 62 version, so updating to that now.
Yep, latest version fixes it :)
For others having the problem, Chrome v62.0.3202.75 fixes the problem (just in case people don't check the chromium site).
I have just tested with v. 62 and the bug is gone :)
Most helpful comment
I managed to workaround this issue by changing .modal-backdrop.show opacity to 1 and background-color to rgba(0,0,0,0.5)