Page content flash after close modal

[matthieup240]

Bug description:

When I close the modal, I can see a flash on the page content. I used to see this behaviour on a background image.

Link to minimally-working plunker that reproduces the issue:

Version of Angular, UIBS, and Bootstrap

Angular: 1.4.2

UIBS: 2.2.0

Bootstrap: 3.3.5

[wesleycho]

Please post a reproduction. I cannot reproduce this.

[Mr-Anonymous]

I noticed the same thing too. In my case I noticed the animate css in the parent page is triggered when the modal is closed which shows like a flash-like appearance. Just couple of days ago, I updated UI Bootstrap from version 0.13.4 to 2.3.0. I did not notice this issue in the 0.13.4 version. But once I updated to v2.3.0, I noticed this odd behaviour after each Modal close.

For example, I have the html in the parent page like this:

<div class="wrapper wrapper-content animated fadeInRight">
    <a ng-click="vm.openModal()">Click Me!</a>
    <p>Something Something</p>
</div>

Now, when the Modal window is closed, the page seems to kickstart the fadeInRight animation once again and it flashes before that happens. The actual page doesnt reload fully but the view appears to flash after modal close. This happens in all pages that has $uibModal when the modal window is closed.

Neel.

[Mr-Anonymous]

Is there any update on this? If I had to change my UIBS to a older version that did not have this issue, does anyone know from which version this issue started happening?

[Mr-Anonymous]

The past hour I went through changing my ui-boostrap file to the older versions to see when this issue doesn't appear. It appears this issue started having ever since version 0.14.3. The versions before this doesnt have this issue. However, since 0.14.3 has breaking changes, changing my ui-bootstrap file to even older version means I need to rewrite all those codes to the old ones. I hope someone here can identify the cause of this issue. My app looks really bad when the screen flashes after 5 seconds everytime the modal is closed.

[fedort]

I ran into the same issue. My theme had the following css:

body.modal-open .wrapper-content.animated { -webkit-animation: none; }

It can be resolved by removing that CSS. Not sure what has changed since version 0.14.3 to cause it to re-animate, but here's a plunkr: https://plnkr.co/edit/V9VZL7UvYZQY7s9Id1Lf?p=preview

[martinpagesaal]

Any updates on this issue?! We have the same issue, but I could not find the sloution.

I'm using Angular 1.6.7, angular-boostrap:2.5

[Mr-Anonymous]

This is awhile ago and from my memory, I think I fixed this issue by just removing the animated class from the modal. When I don't use Animate.css to the modal window, I think the flash doesn't happen.

[martinpagesaal]

Not sure if this was the same issue or not, I could fixed it yesterday Night.

After modal was closed Digest cycle stoped completly .

The issue was the interaction with a patch we had for an old issue of angular.

We had this script in the code: angular-issue9128patch.js

It was a patch for angular issue for https://github.com/angular/angular.js/issues/9128

After I removed this strange patch it worked as expected.

Just FYI, I think this was the exact patch https://gist.github.com/jhunken/767cdf62ecc9f31c56da there were a couple of versions out there