Mobile Safari RGBA background color appears darker than intended

[MethodGrab]

trafficstars

Summary:

An RGBA background color can appear darker than intended when using translate3d or translateZ inside an element with -webkit-overflow-scrolling: touch.

Platforms:

• iOS 8.4

How to reproduce:

1. Create a container with -webkit-overflow-scrolling: touch;
2. On an element inside the container add transform: translate3d(0, 100px, 0)

Reduced Example:

http://codepen.io/MethodGrab/full/JdwYGV/ In most browsers clicking the "toggle translate" button has no effect on the background color but in Mobile Safari, the background gets darker.

Workarounds:

• Use translateX / translateY instead of translate3d / translateZ
• Don't use -webkit-overflow-scrolling: touch

[rolero]

Any update if this was ever fixed. I am experiencing this issue right now including that the text looks less sharp.