Bug 65481 – Border doesn't stay when using -webkit-transition

• Status: RESOLVED
• Resolution: WONTFIX
• Component: CSS

[Aaron Reisman]

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...

[Simon Fraser (smfr)]

Does that happen when you don't use :target?

[Aaron Reisman]

yep, see my new test case here:

http://fiddle.jshell.net/rbUhj/10/

[Simon Fraser (smfr)]

Your fiddle can be simplified: http://fiddle.jshell.net/rbUhj/11/

I think this has to do with shorthands.

[Aaron Reisman]

ok, so is this considered a bug or not?

[Simon Fraser (smfr)]

Yes, that's why I confirmed the bug.

[Simon Fraser (smfr)]

BTW, did you file a bug for "// fix safari bug" in your fiddle?

[Aaron Reisman]

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.

[Alexis Menard (darktears)]

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.