Bug 92220 - Make transitions work between different Length types
Summary: Make transitions work between different Length types
Alias: None
Product: WebKit
Classification: Unclassified
Component: New Bugs (show other bugs)
Version: 528+ (Nightly build)
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Mike Lawther
Depends on:
Reported: 2012-07-24 23:50 PDT by Mike Lawther
Modified: 2012-09-01 18:02 PDT (History)
6 users (show)

See Also:

Patch (4.94 KB, patch)
2012-07-24 23:54 PDT, Mike Lawther
no flags Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description Mike Lawther 2012-07-24 23:50:50 PDT
Make transitions work between different Length types
Comment 1 Mike Lawther 2012-07-24 23:54:05 PDT
Created attachment 154276 [details]
Comment 2 Mike Lawther 2012-07-25 00:04:20 PDT
This patch makes this simple example behave the same in WebKit as it does in Firefox:
  #transition {
    width: 10px;
    height: 10px;
    background-color: green;
    -webkit-transition: all 10s linear;
    -moz-transition: all 10s linear;
    -o-transition: all 10s linear;

  #transition:hover {
      width: 400px;
      height: 90%;
<div style="width: 500px; height: 500px; border: 1px solid black;">
    <div id="transition"></div>
Clicky: http://jsfiddle.net/Fyqb9/2/

Hovering over the green box causes both width and height to smoothly transition, as they do in Firefox.

Currently, height will snap between 10px and 90%, which is pretty jarring, especially if you unhover the box halfway through the transition.

See https://bugs.webkit.org/show_bug.cgi?id=90037 for some profiling I did when implementing this blending function for calc.
Comment 3 Simon Fraser (smfr) 2012-07-25 09:13:22 PDT
So what happens if height:90% resolves to different values at the start and end of the transition? Say;

<div class="container">
<div class="inner"></div>

.container {
  height: 100px;

.container:hover {
  height: 200px;

.inner {
   height: 20px;
  transition: height 1s;

.container:hover .inner {
  height: 90%;
Comment 4 Mike Lawther 2012-07-25 22:43:16 PDT
Hi Simon - it does just what you'd expect :) If you run your example in Firefox (adding some background colors and moz-transition etc), you'll see the same thing in WebKit with my patch applied.

What happens is:
 - 'container' instantly snaps to 200px
 - 'inner' smoothly transitions from 20px to 90% of 200px

It's a bit more interesting to have container transition over 1s as well (make the transition linear so it's clearer what's going on). Again, it works the way you'd expect (and the same as Firefox), with 'inner's height velocity accelerating to maintain the correct distance over the transition.

I wrote a layouttest for transitioning of dependent values as part of one of my previous changes: http://trac.webkit.org/browser/trunk/LayoutTests/css3/calc/transitions-dependent.html

This patch uses the same machinery that that test covers, so what you see in there for calc() is now what you'll see for non-calc values.
Comment 5 Mike Lawther 2012-07-26 19:13:34 PDT
I also tested IE10 (the first version of IE to support CSS3 transitions), and it matches Firefox in that it will smoothly interpolate between px and %.

Simon and I had an IRC conversation about whether this behaviour was correct. The transition spec does say that the transition happens over computed values, hence it's unclear as to whether a smooth transition between px and % is allowed (as the computed value for % is % - it's the *used* value where a % becomes px).

David Baron proposed on www-style (http://lists.w3.org/Archives/Public/www-style/2012Jun/0125.html) that animation of certain properties that were able to be defined as a length or a percentage should happen "between a length and a percentage (in either order) as a calc". Which is just what this patch does :)

There was support for and no disagreement with this proposal, so for web compat I reckon we should go ahead and match Firefox and IE10's behaviour.
Comment 6 Simon Fraser (smfr) 2012-07-26 20:40:25 PDT
Comment on attachment 154276 [details]

OK then!
Comment 7 Simon Fraser (smfr) 2012-07-26 20:41:16 PDT
Does this work right for transforms too, like translateX(10px) to translateX(90%)?
Comment 8 WebKit Review Bot 2012-07-26 21:32:35 PDT
Comment on attachment 154276 [details]

Clearing flags on attachment: 154276

Committed r123837: <http://trac.webkit.org/changeset/123837>
Comment 9 WebKit Review Bot 2012-07-26 21:32:39 PDT
All reviewed patches have been landed.  Closing bug.
Comment 10 Mike Lawther 2012-07-26 21:36:00 PDT
Good question! Yes it does - the following example code works the same in Firefox and my patched WebKit (ie the div smoothly translates to the right):
  #transition {
      width: 200px;
      height: 200px;
    -webkit-transform: translateX(10px);
    -moz-transform: translateX(10px);
    background-color: green;
    -webkit-transition: all 10s linear;
    -moz-transition: all 10s linear;

  #transition:hover {
    -webkit-transform: translateX(50%);
    -moz-transform: translateX(50%);
<div id="transition"></div>
Comment 11 mitz 2012-09-01 18:02:02 PDT
(In reply to comment #8)
> (From update of attachment 154276 [details])
> Clearing flags on attachment: 154276
> Committed r123837: <http://trac.webkit.org/changeset/123837>

This caused bug 95650.