609681 - Jumping CSS3 transitions when transitioning both border-width and margin-width in a way that should keep the sum constant

Status: RESOLVED WONTFIX

(Core :: CSS Parsing and Computation, defect)

Description

[Johannes Koggdal]

User-Agent:       Mozilla/5.0 (Macintosh; Intel Mac OS X 10.6; rv:2.0b8pre) Gecko/20101104 Firefox/4.0b8pre
Build Identifier: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.6; rv:2.0b8pre) Gecko/20101104 Firefox/4.0b8pre

When I apply transition to both border-width (to a top border) and margin-top, and set the destination border-width to 5px more than the original value and margin-top to -5px, the box jumps some in the y axis during the transition. The values (5 / -5) could be anything, just that they have the same absolute value. When they have that, the box should not move, it should just get a thicker border.

Check out the demo here: http://koggdal.se/moz-css-transition-bug.html

I've added transition properties for Webkit too, so you can see that it works a lot better there.

Reproducible: Always

Steps to Reproduce:
1. Go see the demo: http://koggdal.se/moz-css-transition-bug.html
2. Two transition properties: border-width and margin-top
3. Initial values { border-width: 2px; margin-top: 0; }
4. Final values { border-width: 7px; margin-top: -5px; }
Actual Results:  
I saw small jumps of the y position of the box on hover.

Expected Results:  
The box should be fixed on it's initial position, just the border-width should animate visually to the user. Internally, it should animate margin-top at the same rate of the border-width, which will produce a fixed position of the box.

Comment 1

[Boris Zbarsky [:bzbarsky]]

Webkit rounds all lengths to integer pixels.  We round border widths to integer device pixels, but not margin widths.  So halfway through the transition, your border-top-width is 5px but your margin-top is -2.5px, for a sum of 2.5px.  And since 2.5 != 2, you get a 1px jiggle.

This has nothing to do with transitions per se; you'd get the same effect by just setting those styles.

Comment 2

[Johannes Koggdal]

Ok, I understand. Is there a reason for not rounding margin widths? Because otherwise I feel it would be better to round that too. Or not rounding border widths?

Comment 3

[Boris Zbarsky [:bzbarsky]]

We generally try to not round until as late as possible; see http://weblogs.mozillazine.org/roc/archives/2008/01/subpixel_layout.html for some of the details.

This caused one unfortunate issue with borders: people commonly specify borders with widths like 1.3333px and expect them to paint with a consistent on-screen width no matter where the border is positioned on screen.  But if you 1.3333px border has its top edge at 0, then its bottom edge rounds to 1 and you get a 1px thick line.  If its top edge is at 0.333333 then the top edge rounds to 0, but the bottom edge is at 1.666666 and rounds to 2; you get a 2px thick line.  It's very noticeable when this happens, especially when the borders are on table rows and you see a whole bunch of them at once at all sorts of non-integer offsets.  So we started rounding borders, but nothing else... which as you noticed has its own problems.

Comment 4

[Johannes Koggdal]

That gives the whole thing more clarity, thanks. Guess this is actually not a bug then that will be fixed.