Bug 18076 - Box disappears after CSS Transition completes
Summary: Box disappears after CSS Transition completes
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: 528+ (Nightly build)
Hardware: Macintosh OS X 10.5
: P2 Normal
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2008-03-25 14:17 PDT by Faruk Ates
Modified: 2008-03-31 15:31 PDT (History)
1 user (show)

See Also:


Attachments
Sample of :hover state transition and box disappearing (878 bytes, text/html)
2008-03-25 14:18 PDT, Faruk Ates
no flags Details
Fix the StyleBackgroundData copy constructor; make BLEND_MAYBE_INVALID_COLOR more efficient (2.84 KB, patch)
2008-03-30 18:50 PDT, mitz
hyatt: review+
Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description Faruk Ates 2008-03-25 14:17:38 PDT
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.
Comment 1 Faruk Ates 2008-03-25 14:18:37 PDT
Created attachment 20041 [details]
Sample of :hover state transition and box disappearing
Comment 2 Faruk Ates 2008-03-25 14:26:59 PDT
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?)
Comment 3 mitz 2008-03-25 19:58:08 PDT
(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.
Comment 4 mitz 2008-03-25 20:03:05 PDT
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.
Comment 5 Faruk Ates 2008-03-26 08:00:29 PDT
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.
Comment 6 mitz 2008-03-30 18:50:08 PDT
Created attachment 20228 [details]
Fix the StyleBackgroundData copy constructor; make BLEND_MAYBE_INVALID_COLOR more efficient
Comment 7 Dave Hyatt 2008-03-31 15:23:40 PDT
Comment on attachment 20228 [details]
Fix the StyleBackgroundData copy constructor; make BLEND_MAYBE_INVALID_COLOR more efficient

r=me
Comment 8 mitz 2008-03-31 15:31:34 PDT
Fixed in <http://trac.webkit.org/projects/webkit/changeset/31485>.