[Webkit-unassigned] [Bug 65481] Border doesn't stay when using -webkit-transition

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=65481


Alexis Menard (darktears) <alexis.menard at openbossa.org> changed:

           What    |Removed                     |Added
----------------------------------------------------------------------------
                 CC|                            |alexis.menard at openbossa.org




--- Comment #8 from Alexis Menard (darktears) <alexis.menard at openbossa.org>  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.

-- 
Configure bugmail: https://bugs.webkit.org/userprefs.cgi?tab=email
------- You are receiving this mail because: -------
You are the assignee for the bug.