Modal flicker about unpoly HOT 8 CLOSED

Hi @adam12, thanks for the video.

I'm afraid I cannot reproduce the flickering modal in this minimal example: http://unpoly.com/examples/modal/preview.html

Are you sure that no other CSS or inline style attributes are present?

Could you provide two minimal HTML files that expose this issue?

from unpoly.

Thanks for the response. Indeed, it doesn't occur on that example for me either.

Are you sure that no other CSS or inline style attributes are present?

It occurred without any other CSS on the page.

Could you provide two minimal HTML files that expose this issue?

I will see if I can do this. It could be my app specific (but I don't think it is, TBH).

Due to the random nature of it (usually the first few clicks, and then random afterwards), it's been a bit hard to debug, but I have found that adding the up-animation="none" property to the selector, the flicker never happens.

Alternatively, adding an up-animation="move-from-top" or similar animation, the issue is even more pronounced.

What I suspect is happening is some sort of styling occurring out of order - the backdrop appearing without animations, then disappearing/reappearing with the specific animation.

from unpoly.

If you manage to attach a minimal use case to this issue, please also let me know your browser and OS.

How I would debug this further: Choose a really long duration of the opening animation (e.g. using up-delay="6000", then use the browser inspector to see if anything looks funny during the animation.

from unpoly.

Choose a really long duration of the opening animation (e.g. using up-delay="6000"

That helped - I saw the modal immediately open and then close, and after the delay, it opened normally.

please also let me know your browser and OS

Chrome on macOS, but I can reproduce it with Safari on macOS as well.

from unpoly.

I think what happens is that the modal enters the DOM and is visible for one frame before the animation (fading in from opacity 0 to 1) begins.

The issue might be between these two lines:

We're using promises to chain "server response has been received" and "start animating". However, a browser might insert a rendered frame between those two actions because of reasons.

from unpoly.

I think you're right.

I'm able to prevent the flicker with the following CSS, but I don't care for it and I am not sure if all the animations use an opacity style attribute, or just the default.

.up-modal > * {
  opacity: 0;
}

Would it make sense for the createFrame function to hide the modal by default (with an inline style maybe?)?

from unpoly.

Unfortunately I cannot reproduce this issue on my machines, even when I provoke timeout clamping.

I went ahead and implemented your idea of hiding the modal before starting the opening animation. Could you please check if the issue is solved in version 0.34.2?

from unpoly.

I went ahead and implemented your idea of hiding the modal before starting the opening animation. Could you please check if the issue is solved in version 0.34.2?

Fix worked! Thanks.

from unpoly.