CODEWITHSUNDEEP
htmlcss
Fong-Wan Chau
Fong-Wan Chau

Reputation: 2289

GPU acceleration using transform:translateZ(0) and text disappear when color is white

My project in some part need GPU acceleration to make a fast translation, but when I active the GPU acceleration using -webkit-transform:translateZ(0) in CSS, I see that the color becomes lighter, and white letters disappears completely in any background. When I setting up the color of letter to #CCC or #DDD, it hardly can be observed.

Any solution to fix this problem?

Example:

GPU disabled

GPU enabled

Upvotes: 3

Views: 3204

Answers (2)

webkitguy
webkitguy

Reputation: 11

We ran into this problem when using GPU-acceleration in combination with text-rendering:optimizeLegibility. Not declaring text-rendering in general was the solution to this problem in our case.

Upvotes: 1

Fong-Wan Chau
Fong-Wan Chau

Reputation: 2289

Ok, solved by myself..

After a night thinking about it, I figured out that the reason to disappear the text and the text color are being lighter maybe is due by the anisotropic or antialiasing of the text, so I disabled the anisotropic by adding text-rendering:optimizespeed in the CSS and woala! Problem solved.

Upvotes: 4

Related Questions