Modal scrollbar appears during animation

Fixed Bugs
1

Apparently not a bug, but during the modal entrance or exit animation, a scrollbar does appear on the .cc-mdl container.
I think it’s caused due to the overflow:auto rule.

This can easily be overlooked depending on how the scrollbar of the browser and/or OS is behaving.

Tested with the Ricardo Layout, didn’t investigate further.

2

Just had a closer look and here is the issue.

The scrollbar appears on the .cc-mdl container during the animation of the .cc-mdl .cc-modaler container.
It is moving inside the parent container which has a fixed height & width and an overflow of auto. It’s exactly what one could expect to happen here.
Didn’t test all animations but should affect each with the transform property applied.
I think there shouldn’t be any overflow rules set if it’s not the actual modal content container itself.

It could be considered to add overflow:auto; to .cc-mdl .cc-modaler.
In 99% of all cases this is exactly what’s required, and it will prevent user confusion/errors and assures correct behaviour on front-end.
The rule can easily be overridden inside the block layout options, if necessary.

1 Like
3

Hi there @Marius,

Thanks for reporting this.
I can’t seem to recreate this overflow issue on any browser…
Can you confirm that you’re experiencing it here: https://gohoya.us9.instawp.xyz/2022/07/23/hello-world/

Thanks in advance.

4

Hey @Louis, thanks for having a closer look on this.

I can’t confirm the issue on your demo page. It’s working properly.
Will compare the two modals side by side and find out what the issue on my side is.
Maybe you can keep this page available for this week?

I’ll keep you posted with results.

Thanks!

1 Like
5

Could you try with animations that enter from outside the screen (slide) and only from bottom or right, @Louis?

.cc-mdl.cc-modal-animation-name .cc-modaler with a positive transform:translate(value)

1 Like
6

Thanks for persevering!
The behaviour is definitely inconsistent throughout different browsers, and I was able to reproduce the scrollbar issue.

Removing the overflow is something we’ll be doing as you said.

Thanks @Marius

1 Like
7

I found out, that would cause issues with the slide in right animations.
Not sure if this would be a possible approach but switching from overflow:auto to overflow:hidden could solve the actual issue without generating another one.

Either there is a way to bypass the necessity of an overflow rule on the .cc-mdl or there just needs to be an overflow of hidden to make the block work properly.

Here again, not sure if this could cause other issues, but I’m sure you’ll find a proper solution.
Since I don’t want to be the one who introduces a new issue, I needed to add some thoughts.

Thanks again @Louis.

8

Hi there @Marius,

Going through the confirmed bugs and see this one.
I’m not able to reproduce it anymore as I think it was fixed in a previous update.
If you still experience this, please let me know by replying to this thread.
Cheers,

9

Same here :+1:
Thanks fot the fix and follow up.

1 Like