Home/ Questions/Q 9161269
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T13:55:50+00:00

I decided to use: * { -webkit-transform: translate3d(0px, 0px, 0px); } when I saw

  • 0

I decided to use:

* {
    -webkit-transform: translate3d(0px, 0px, 0px);
}

when I saw that it makes my animations much smoother, probably because it forces hardware acceleration. But I also need to make some z-index tweaks in order to place a shape in front of a text, to mask that text at some point of an animation. The thing is: my (grey) shape must move synced with another shape (the green one in the example below), which is behind the text.

I built a simple example to make it more visual. It works nicely on Firefox, but I just can’t get it working on Chrome and Safari. Well, it works if I remove the translate3d thing, but since my actual project requires lots of sliding and smooth animations, the user experience would suffer if I did that.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Got it! We can use CSS clip Property to mask the text and update the rect values based on the other object’s position. Here’s some info w3schools.com/cssref/pr_pos_clip.asp. This link is pretty insightful also http://webdesignerwall.com/tutorials/5-simple-but-useful-css-properties.

    And finally here is my project, done http://iuqo.com. When you drag the background you see the text being (vertically and nicely) cut. Exactly as I wanted it.

    • 0