522142 - -moz-transition does not support transitioning between '0' and a percentage value

Status: RESOLVED FIXED

(Core :: CSS Parsing and Computation, defect, P2)

Description

[Peter Gasston]

User-Agent:       Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.3a1pre) Gecko/20091013 Minefield/3.7a1pre
Build Identifier: Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.3a1pre) Gecko/20091013 Minefield/3.7a1pre

In a demo I made, I have the following code:

#blur1 {
left: -100%;
-moz-transition: left 1s linear;
}

.container:hover #blur1 { left: 0; }

When hovering the container, the transition effect did not occur. When I added a percentage unit to the hover state declaration:

.container:hover #blur1 { left: 0%; }

The transition occurred as expected.

Reproducible: Always

Steps to Reproduce:
1. Visit the demo (http://www.broken-links.com/tests/manga/index_bug.html)
2. Hover the mouse over the picture area
Actual Results:  
The (striped) background image does not smoothly transition into place.

Expected Results:  
It should transition smoothly, as in the third (bottom) demo on this page: http://www.broken-links.com/tests/manga/index.html

Comment 1

[Stebs]

Confirmed on Windows:
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.3a1pre) Gecko/20091016 Minefield/3.7a1pre

Comment 2

[David Baron :dbaron: (⌚️UTC-5, no longer working on Mozilla)]

The issue is that we currently only support animating between lengths, or between percentages, and not from one to the other.  We treat 0 as a length.

We should special-case this one for 1.9.3 if we don't get the general length/percentage case fixed by then.

Comment 3

[David Baron :dbaron: (⌚️UTC-5, no longer working on Mozilla)]

(In reply to comment #2)
> The issue is that we currently only support animating between lengths, or
> between percentages, and not from one to the other.  We treat 0 as a length.

To be clear:  this only applies to properties for which % units require layout-dependent calculations.  For those where % is resolved in the style code, this isn't an issue.

Comment 4

[Rob Crowther]

Is this the same issue?  This works:

    #mybox1 {width: 50%;}
    #mybox1:hover {width: 100%; -moz-transition-duration: 1s;}

This doesn't:

    #mybox2 {width: 50%;}
    #mybox2:hover {width: auto; -moz-transition-duration: 1s;}

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.3a4pre) Gecko/20100329 Minefield/3.7a4pre

Comment 5

[d]

(In reply to comment #4)
> Is this the same issue?  This works:
> 
>     #mybox1 {width: 50%;}
>     #mybox1:hover {width: 100%; -moz-transition-duration: 1s;}
> 
> This doesn't:
> 
>     #mybox2 {width: 50%;}
>     #mybox2:hover {width: auto; -moz-transition-duration: 1s;}
> 
> Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.3a4pre) Gecko/20100329
> Minefield/3.7a4pre

I'm not sure if we need separate bugs for these issues, but bug 536539 mentions units like "auto" specifically (this bug is depending on that bug, for now). I am in great need of the functionality in these two bugs (for cases like yours, especially) myself, but currently work on bug 363249 needs to be finished for it to be possible.

Comment 6

[David Baron :dbaron: (⌚️UTC-5, no longer working on Mozilla)]

That's a separate issue from *this* bug, but probably the same as bug 536539; this bug should be about the very specific and more-easily-solvable issue of '0' and percentages.

Comment 7

[Damon Sicore (:damons)]

Bumping this to beta2 per beta re-triage with dbaron.  If this should indeed block beta1, please re-nom.

Comment 8

[Mike Beltzner [:beltzner, not reading bugmail]]

Moving to betaN, will need to be pulled into one of the beta milestones.

Comment 9

[David Baron :dbaron: (⌚️UTC-5, no longer working on Mozilla)]

Patch in bug 520234.

Comment 10

[David Baron :dbaron: (⌚️UTC-5, no longer working on Mozilla)]

Fixed by bug 520234.