Issue with the translateZ(50px) moveable-control-box on safari

daybrush / moveable

Moveable! Draggable! Resizable! Scalable! Rotatable! Warpable! Pinchable! Groupable! Snappable!

https://daybrush.com/moveable/

MIT License

10.08k stars 618 forks source link

Issue with the translateZ(50px) moveable-control-box on safari #302

Closed tannguyen248 closed 4 years ago

tannguyen248 commented 4 years ago

Environments

Framework name: moveable
Framework version: 0.17.10
Moveable Component version: moveable-control-box

I don't know why we should have the translateZ(50px) but on Safari, it works as the z-index and covers all my material-ui popup (with translateZ(0px). The image below describes the issue, do you have any idea with it?

daybrush commented 4 years ago

@tannguyen248

I wish there was a demo.

The reason I set translateZ to 50px is that the moveable component should always be shown in front. So that picture is normal.

tannguyen248 commented 4 years ago

@daybrush day so do we have any way to override the translateZ?

tannguyen248 commented 4 years ago

I cannot override the control box translateZ because it's added by every single move, so I override the material-ui to work-around with this issue.

daybrush commented 4 years ago

moveable 0.19.1
react-moveable 0.22.3
preact-moveable 0.21.3
ngx-moveable 0.15.1
svelte-moveable 0.10.1

moveable's new version is released. translateZ prop is added. Thank you :)

tannguyen248 commented 4 years ago

Thank you ;)