Bug 135619 - Opacity values are not clamped during transition causing elements with identical colors to become temporarily distinct
Summary: Opacity values are not clamped during transition causing elements with identi...
Status: RESOLVED INVALID
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: 528+ (Nightly build)
Hardware: PC Windows 8
: P2 Normal
Assignee: Nobody
URL: http://jsfiddle.net/ETzZe/7/
Keywords:
Depends on:
Blocks:
 
Reported: 2014-08-05 14:14 PDT by jseanxu
Modified: 2014-08-05 14:42 PDT (History)
0 users

See Also:

Attachments
Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description jseanxu 2014-08-05 14:14:36 PDT 
When putting a CSS transition the opacity property with a cubic-bezier curve that goes out of [0,1] range (i.e. [0,2,0,2]), changing opacity can cause the element flashes because opacity is not clamped.

Steps to Reproduce:
-Go to: http://jsfiddle.net/ETzZe/7/
-Hover over the box
-Notice the circle inside the box lighting up

Expected result:
Since both the circle and box have the same background-color, and the circle is just changing opacity, no visible change should have occurred.

Actual result:
The opacity of the circle is being transitioned on hover, the opacity value appears to temporarily go beyond 1.0 and the circle lights up.
Comment 1 jseanxu 2014-08-05 14:42:39 PDT 
This appears to work fine on webkit Safari and only affects Chrome... marking as resolved.