Adding ngx-drag-scroll to ng-bootstrap modal causes flash while opening modal

[malwinalesniewska]

Bug description:

I use ng-bootstrap modal in my app and everything works fine unless I add drag-scroll to my modal component - it causes modal to flash while opening and I don't know if it's caused by modal itself or by ngx-drag-scroll. Looks like some style issue, do you have any idea?

Link to minimally-working StackBlitz that reproduces the issue:

https://stackblitz.com/edit/angular-fha7kn

Versions of Angular, ng-bootstrap and Bootstrap:

Angular: 10.0.2

ng-bootstrap: 8.0.0

Bootstrap: 4.5.3

[maxokorokov]

cc @fbasso, looks like some kind of animation glitch to me → removing <drag-scroll> element fixes the issue, disabling animations as well

[malwinalesniewska]

@maxokorokov there's new problem I've encountered. I noticed when I use any kind of code to edit my html styles from ts file, modal background flashes. I've changed stackblitz so you can see the issue as well. I've added test.html and test.component.ts. In test.html I use function to check parent's element height and set it as max-height of child element using [ngStyle]. And when I use it, modal flashes (if you comment out the code inside ngAfterViewChecked, everything works as expected). Could you please give me any clue how to solve it? I already have plenty of your modals in my app and it would be huge waste of time to remove them now.

[devoto13]

We have the same issue in our project.

It looks like the browser fires a transitionend event immediately if the code accesses/modifies any DOM properties (causing a reflow?) in the same macro task after the transition was started. Delaying the access to DOM with setTimeout(() => accessDom(), 0) prevents the problem from appearing. I'm not familiar enough with the browser's low-level details to understand what exactly is going on here.

A naive fix for ng-bootstrap may be to move transition start into its own macro task to prevent conflicts with user code. But I guess we should understand why exactly this DOM interaction breaks transitions... The problem reproduces in the latest Chrome, Safari, and Firefox at least, so it's probably not a browser-specific glitch.

Here is even more minimal reproduction, showing a couple of failing/passing use cases based on the above findings: https://stackblitz.com/edit/angular-cwa5mb?file=src%2Fapp%2Fmodal-basic.ts

UPD Can't replicate without ng-bootstrap (https://stackblitz.com/edit/angular-ivy-oahcjh?file=src%2Fapp%2Fapp.component.ts), so it's probably something in ng-bootstrap, which causes transitionend to fire too early.