'shown' event on modal called before transition completed.
Created by: DataTables
- Operating system and version: Fedora 28
- Browser and version: Chrome 66
- Reduced test case: http://jsfiddle.net/fouavchs/1/
I think this is a duplicate of #5045 (closed), but that issue was closed without a test case being provided and I can't reopen it. Apologies if I should have posted in the closed issue.
I've been hitting a problem in Bootstrap 4 (wasn't able to reproduce the issue in Bootstrap 3) whereby I position an element over a Bootstrap modal when it opens (a date picker for my use case, but it applies to any overlay). I use shown.bs.modal
to know when the modal is visible and the transition is complete - the docs say
show.bs.modal | This event fires immediately when the show instance method is called. If caused by a click, the clicked element is available as the relatedTarget property of the event.
However, I've been finding that the shown
event triggers before the CSS transition is completed. The test case demonstrates this:
- Click the "Launch demo modal" button in the output view (I've just used the docs demo HTML for the modal)
- Observe that the blue line is just above the model footer initially.
- After a second observe that the blue line is moved to exactly match the top of the modal footer.
I've got a little function that positions the blue bar to where the modal footer position is read. When shown.bs.modal
is triggered, this is not the final position of the modal, hence the need for a timeout to shift it to the correct position.
Expected result: The blue bar should be shown exactly at the top of the footer when the CSS transition is completed. It appears that shown.bs.modal
is triggering too early.
I should note that in #5045 (closed) it was noted that the fade
class is needed for this to work. The modal the HTML I've used has that class and this problem is still present.
Tested with Bootstrap 4.1.0, 4.1.1 and 4.1.3.