Bug 135619
| Summary: | Opacity values are not clamped during transition causing elements with identical colors to become temporarily distinct | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | jseanxu |
| Component: | CSS | Assignee: | Nobody <webkit-unassigned> |
| Status: | RESOLVED INVALID | ||
| Severity: | Normal | ||
| Priority: | P2 | ||
| Version: | 528+ (Nightly build) | ||
| Hardware: | PC | ||
| OS: | Windows 8 | ||
| URL: | http://jsfiddle.net/ETzZe/7/ | ||
jseanxu
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.
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
jseanxu
This appears to work fine on webkit Safari and only affects Chrome... marking as resolved.