Bug 65481 - Border doesn't stay when using -webkit-transition
Summary: Border doesn't stay when using -webkit-transition
Status: RESOLVED WONTFIX
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: 528+ (Nightly build)
Hardware: Mac OS X 10.6
: P2 Normal
Assignee: Nobody
URL: http://fiddle.jshell.net/rbUhj/4/
Keywords:
Depends on:
Blocks:
 
Reported: 2011-08-01 13:04 PDT by Aaron Reisman
Modified: 2012-02-01 03:52 PST (History)
3 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Aaron Reisman 2011-08-01 13:04:05 PDT
http://fiddle.jshell.net/rbUhj/4/

shouldn't a boarder stay around when in a transition?

if you click an item, you can clearly see it growing (because of the border) but then when you click another item, the border gets immediately removed.

the transition is also pretty sluggish...
Comment 1 Simon Fraser (smfr) 2011-08-01 17:34:26 PDT
Does that happen when you don't use :target?
Comment 2 Aaron Reisman 2011-08-01 17:42:47 PDT
yep, see my new test case here:

http://fiddle.jshell.net/rbUhj/10/
Comment 3 Simon Fraser (smfr) 2011-08-01 17:55:38 PDT
Your fiddle can be simplified: http://fiddle.jshell.net/rbUhj/11/

I think this has to do with shorthands.
Comment 4 Aaron Reisman 2011-08-01 18:04:06 PDT
ok, so is this considered a bug or not?
Comment 5 Simon Fraser (smfr) 2011-08-01 18:06:44 PDT
Yes, that's why I confirmed the bug.
Comment 6 Simon Fraser (smfr) 2011-08-01 18:07:13 PDT
BTW, did you file a bug for "// fix safari bug" in your fiddle?
Comment 7 Aaron Reisman 2011-08-01 18:10:13 PDT
I believe that bug has been patched in previous versions of webkit, but the unfortunate downside is users still like to run older versions of Safari, and as a lead web developer I need to hold on to these thoughts to be able to support all browsers including legacy.
Comment 8 Alexis Menard (darktears) 2012-02-01 03:44:00 PST
I looked at it. The problem is not related to the shorthand, I could reproduce the same problem by doing :

<style>
.target {
    background: green;
    /*border: 20px solid blue;*/
    border-bottom-width : 20px;
    border-bottom-style : solid;
    border-bottom-color : blue;
    padding: 2em;
}
li {
    background: #F00;
    /*border: 0px solid black;*/
    padding: 1em;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
}
</style>

I looked at it and all other browser (opera, firefox) exhibits the same behavior.

I believe it is not a bug. Here is why :

The first transition, the original li style from the class .target works fine as we see the border growing and change color from black to blue ; we transition from the initial value of the border-bottom-width, border-bottom-style, border-bottom-color (0px solid black) to border-bottom-width: 20px, 
border-bottom-style : solid and border-bottom-color : blue. Works fine!

But the reverse (transition from class .target to original li) appears to not work. In fact it works fine but the visual effect is not working. We are making a transition from border-bottom-width: 20px, border-bottom-style : solid and border-bottom-color : blue; back to border-bottom-width: 0px, border-bottom-style : none, border-bottom-color: black (initial values). We can't animate gradually the border-bottom-style so it right away switch to its end value "none" leading the border to visually disappear (even if the color and the size are animated).

One workaround is to add for example border: 0px solid black; on the li style declaration.