Skip to content
This repository has been archived by the owner on May 29, 2019. It is now read-only.

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

Closed
hopest opened this issue Jan 19, 2016 · 11 comments
Closed

Comments

@hopest
Copy link

hopest commented Jan 19, 2016

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
screenshot_7

@wesleycho
Copy link
Contributor

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

@hopest
Copy link
Author

hopest commented Jan 19, 2016

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
Copy link
Contributor

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
Copy link
Author

hopest commented Jan 20, 2016

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
Copy link

sime commented Jan 20, 2016

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
Copy link

sime commented Feb 12, 2016

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
Copy link
Contributor

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
Copy link
Contributor

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, 1dbad8a.

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

@mb2140
Copy link

mb2140 commented Mar 22, 2016

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
Copy link

sime commented Mar 22, 2016

@mb2140 Have you tried my previously suggested CSS override?

@mb2140
Copy link

mb2140 commented Mar 22, 2016

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.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants