CSS3 transform makes element movable without limits

Question

I use CSS3 transform to move the content of my website to show the menu.

The problem is on the mobile. After a user opens the menu (with the help of CSS3 transform) the user then can move the content and some times part of the content is shown in the viewport. It's like the element does not know it shouldn't go further than a certain distance.

The menu is on the left. And this is the direction where the content can go hide in part. Is there a way to stop this? To force it to only show in the viewport.

Answer 1

CSS3 transform breaks CSS property position: fixed;. So you need to avoid mixing these two together.

It is related to this bug report for chromium.