Displaying the black square a few milliseconds in the "animation: false" in Modal

[hopest]

If you turn off the animation dialog box, at the moment, it appears completely black shade.

this problem can be clearly seen in the browser IE11, or on slower computers

[wesleycho]

Is this with 1.1.0? Can you give more information about this scenario? I am having trouble reproducing this.

[hopest]

Here https://www.youtube.com/watch?v=ZGVNKinES6A video that demonstrates this point. The first part of the animation: true. The second part of the animation: false

When animation: false on older PCs, the black shading can be seen for a long time.

[wesleycho]

I need more information still - what versions does this occur in, and how best can I reproduce it in order to craft a fix for this?

Without this information, this isn't likely to be fixed.

[hopest]

This is version 1.1.0. Sample code, taken out of the main examples of library http://angular-ui.github.io/bootstrap/#/modal http://plnkr.co/edit/FLrgGm?p=preview

1. Open example
2. Press the Toggle Animation (false)
3. Open Inspect Chrome

Put breakpoints ...angular-animate.js Number line 2598

 function markElementAnimationState (element, state, details) {
      details = details || {};
      details.state = state;
.....
}

Inspecting (F8)

[sime]

Using the above technique, I too see for a moment the backdrop element only having the following classes for a number 'cycles': modal-backdrop in-add.

Eventually the backdrop element finishes on modal-backdrop in

[sime]

I don't know if there is a possible solution, but a workaround is this overriding CSS

.modal-backdrop {
  opacity: .5;
}

But it does leave backdrop inherently broken by default.

[wesleycho]

We may try fixing this by switching from $animateCss to $animate - anyone may try their hand at experimenting with a switch and seeing if this fixes the issue, but if not, I will investigate this myself.

[wesleycho]

I took a look, but it looks like switching to $animate does not fix this, as seen here.

I suspect this is due to a change that fixed another bug that was worse, 1dbad8a05739964b06d4ecb40fea2ce5030107ed.

If this is the case, we may have to break up the compilation step depending on the state of animations.

[mb2140]

Looks like I'm still running into this issue (slower computer). Is there a way to manually remove the fade-in/fade-out, or just adjust the timing? I tried disabling animation and I'm seeing the same issue (1.2.6).

[sime]

@mb2140 Have you tried my previously suggested CSS override?

[mb2140]

I tried:

.modal-backdrop { opacity: .5 !important; }

But it doesn't seem to do anything. I'm wondering if maybe this is an inline style being set by js somewhere? Also the issue seems to only happen in Chrome (v49) for me - FIrefox looks correct.