sweet-modal-vue

sweet-modal-vue copied to clipboard

I recently updated from 1.1 to 2.0.0 to take advantage of the new width property.

I rebuilt my code without any use of the width property (thus the default width is active) and now I am consistently seeing a brief appearance of a vertical scrollbar on the right side of all dialogs as they open using the new 2.0.0 code. Once the dialog reaches full size the scrollbar disappears but by then the damage is already done -- it destroys the smooth zoom-in effect and overall professional appearance of the dialog. I've verified this occurs in both Chrome and Firefox.

Worse, in Chrome, a good portion of the dialog (including the text, field borders, etc.) that ultimately zooms into view is blurred or offset by a pixel or two for some reason. This appears to be an artifact of the transition. This blurring problem does not occur on Firefox so that at least appears to be a browser-specific phenomenon.

I'm not sure what change is actually causing the scroll bar to appear but I believe it should be reverted until a fix can be developed, as it destroys the otherwise smooth transition and appearance of the dialog. I will be going back to 1.1.

A workaround may involve eliminating the zoom-in transition so the dialog appears in the maximum allowed width out of the box but I haven't tried that yet.

Note to myself: That's what you get for developing on a Mac only >.<

Thanks for reporting, I can reproduce this and a fix will be coming as soon as possible.

Glad you were able to reproduce it. Sometimes that's half the battle. I didn't mention it earlier but my Chrome and Firefox instances are running on Linux.

I tried to eliminate all of the transitions / transforms that I could see in an effort to get the dialog/ content to be full size instantly and avoid the problem but that did not fix it. I was forced to revert to 1.x, which works as expected (albeit without the extremely helpful width property).

What I did gather from my experimentation is that the initial dialog size is fixed but slides or otherwise zooms in. The scroll bar appears as the content of the dialog is rendered, which probably means the content is too big for the size of the container, which in turn probably means one of the transitions must be tweaked or eliminated.

The dialog I was working on had only a title in the header along with the close (X) button and a couple of buttons (save / cancel) in the footer. Nothing in the body. That was sufficient to produce the problem.

I think this is an issue with the use of buttons in the footer. If you look at the examples on the https://sweet-modal-vue.adepto.as/ page you can see the ones with buttons cause a scrollbar to appear briefly on the right hand side. This issue is still happening to this day.

Hmm, as today still.

same here