Bug 18076 – Box disappears after CSS Transition completes

• Component: CSS
• Status: RESOLVED FIXED

[Faruk Ates]

I'm transitioning a test box's border-radius (sidebar on that below) on :hover and after the transition is done the background disappears; if I hover out the entire box becomes invisible (flow doesn't change) including text content.

Test case attached.

Sidebar: to get the border radius property to transition, you actually have to use -webkit-transition-property: border-radius;    (instead of -webkit-border-radius) which is inconsistent with how we currently have to make border radius work in the first place.


Bug exists in both Safari 3.1 and latest Webkit nightly.

[Faruk Ates]

Created attachment 20041 [details]
Sample of :hover state transition and box disappearing

[Faruk Ates]

Additional bug (should I file a separate report?): the background-color and text color transition as well, even though the test case only specifies -webkit-transition-property: border-radius;

(shouldn't that make all other properties NOT transition, but simply instantly switch?)

(In reply to comment #2)
> Additional bug (should I file a separate report?): the background-color and
> text color transition as well, even though the test case only specifies
> -webkit-transition-property: border-radius;
(In reply to comment #0)
> Sidebar: to get the border radius property to transition, you actually have to
> use -webkit-transition-property: border-radius;    (instead of
> -webkit-border-radius) which is inconsistent with how we currently have to make
> border radius work in the first place.

Actually any invalid property keyword you will put there will result in the behavior you see with "border-radius" (which is an invalid property keyword). That the shorthand property "-webkit-border-radius" is not supported is a different issue.

> Additional bug (should I file a separate report?): the background-color and
> text color transition as well, even though the test case only specifies
> -webkit-transition-property: border-radius;

That is all part of this bug: specifying an invalid property keyword caused all properties to animate and the box's background to vanish.

Specifically, it appears that animating 'color' and 'background-color' simultaneously is what leads to the background color being reset to transparent in the end of the transition.

[Faruk Ates]

I see — so the bugs here are actually two entirely different bugs than I thought:

1) transitioning both background-color and color simultaneously makes them both end up transparent at the end of the transition;
2) the shorthand for -webkit-border-radius:  isn't implemented (but it is for just border-radius, which it shouldn't be yet, right?)

I got it to work as intended by being fully explicit (-webkit-border-top-right-radius & …bottom-right…) so that behavior is indeed fully operational.

Created attachment 20228 [details]
Fix the StyleBackgroundData copy constructor; make BLEND_MAYBE_INVALID_COLOR more efficient

[Dave Hyatt]

Comment on attachment 20228 [details]
Fix the StyleBackgroundData copy constructor; make BLEND_MAYBE_INVALID_COLOR more efficient

r=me

Fixed in <http://trac.webkit.org/projects/webkit/changeset/31485>.