Nested modals have flickering overlay
doutatsu opened this issue · 4 comments
Version
vue-final-modal: 4.5.4
vue: 3.4.21
OS
Mac
Reproduction Link
https://stackblitz.com/edit/github-fwkzck
Steps to reproduce
- Open base modal
- Open nested modal
- Toggle nested modal between open / closed, to see the flickering
What is Expected?
Either the nested modals shouldn't have their own overlay or a better transition between modal overlays needs to be supported. Basically we shouldn't see the overlay flicker due to the transitions between modals
What is actually happening?
As can be seen in the video, when the previous modal and nested modal swap, the overlays "jump" resulting in an annoying flicker. It's less noticeable with light overlay but is very obvious with dark overlay
2024-03-31.at.11.54.25.-.Coral.Bee.mp4
Any thoughts on this @hunterliu1003
For nested modals, when two modals are displayed simultaneously, the overlay layer of the lower modal is actually removed (the content layer of the lower modal is not removed). I don't know why this is handled this way; I prefer that the two modals are completely independent and do not affect each other. @hunterliu1003
As mentioned above, adding the overlay-behavior="persist" attribute can solve this problem, but the documentation does not specify this.