Bug 51397 – CSS transparency rendering issue (opacity/rgba). Caused when animating <img>'s under element with transparency.

• Status: RESOLVED
• Resolution: INVALID
• Component: CSS

[Luis Merino]

Created attachment 77111 [details]
"Before"/"After" states of the issue.

CSS transparency rendering issue (opacity/rgba). Caused when animating <img>'s under element with transparency.

It isn't possible for me at the moment to post a link or a resource for testing this, I'll do whenever possible, but I can provide my best demonstration:

<div style="background:rgba(0,0,0.75)">Some text</div> // this is positioned absolute or fixed, doesn't matter. just on top of the images.
<ul> // the stack is animated with JS, to create a slideshow effect, by modifying margin-left value, left/right transitions...
  <li><img src="..." alt="..." /></li>
  <li><img src="..." alt="..." /></li>
</ul>

I've attached a couple of screenshots. Notice how the visible part of the images under the <div> with the opacity value gets "cropped" instead of refreshed. This is corrected if any text is selected, or any other focus occurs inside "window", hence, it refreshes the rendering.

[Simon Fraser (smfr)]

A testcase will be essential to tracking this down.

[Simon Fraser (smfr)]

Still need a testcase.