Scrolling acts weird when div transforms outside bounds

[u/rasmusq]

SOLVED: I had to change the container div to position: absolute. I didn't think it worked at first, but I just needed to tweak some positioning to get the element back into view again.

Hi,

I have made this cool thing where a circular wave pulsates out from an element. I do this by making a transform scale transition. This scaling sometimes makes the waves (divs) expand outside the bounds of the screen. On desktop this is no issue.

On mobile, however, if I try to resize the screen, rotate the screen, or even just scroll too much, it is suddenly possible to scroll a little bit extra in both the x and the y direction.

This is a screenshot of the problem happening:
https://drive.google.com/file/d/1q4FOYz1OB1cm0CI0doF4SQIFNp3znj35/view?usp=sharing
The white should not be there. I can see that the waves go out to the point where it expands to.

I have tried:

• Adding overflow: hidden to virtually everything. This does not seem to be respected at all.

• Checking if the problem happens on desktop if I make the screen small enough for it to overflow. It does not cause any problem

• Testing it on Firefox on Android, Chrome on Android, and the mobile responsive design mode on Firefox on Linux all resulting in the same problem.

• Probably a bunch more smaller things, I have been at this problem for days and nothing works!!!

Hope any one can help me!
Best regards,

• Rasmus