660791 - Using the moz-transition property, a flicker happens when scrolling over the accessory items

Status: NEW

(Core :: CSS Parsing and Computation, defect)

Description

[Chris Blackwell]

User-Agent:       Mozilla/5.0 (Macintosh; Intel Mac OS X 10_6_7) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.71 Safari/534.24
Build Identifier: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.6; rv:5.0) Gecko/20100101 Firefox/5.0

When you hover over an accessory on this page, the moz-transition doesn't seem to work. There is an annoying flickr. If I remove the -moz-transition: all 0.8s ease-in-out from the styles, then the element appears over properly, but with not transition. 

Reproducible: Always

Steps to Reproduce:
1. Go to http://wwwdev.legendboats.com/en/boats/xcalibur/accessories
2. Try and hover over different accessory groups
3. You should see a noticable flickr effect.

Actual Results:  
There is an annoying flicker, or the transition doesn't happen at all.

Expected Results:  
The transition should animate within 0.8s like on Webkit or Opera.

Comment 1

[Boris Zbarsky [:bzbarsky]]

So this is an interesting case.  The relevant styles here are:

  .accessory_item {
    height: 190px;
    margin: 0 10px 10px 0;
    position: relative;
   -webkit-transition: all 0.8s ease-in-out;
   -moz-transition: all 0.8s ease-in-out;
   -o-transition: all 0.8s ease-in-out;
  }
  .accessory_item:hover {
    top: -240px;
    height: 430px;
    margin-bottom: -240px;
  }

When the item is hovered, the transitions start.  Height at this point is still 190px and the bottom margin is still 10px, but the top value becomes -240px _immediately_ because the value is transitioning from "auto" to "-240px" and bug 571344 bites us.  So at that point the box moves up by 240px but is still only 190px tall and is no longer hovered, so the transition reverses, etc.

It looks like WebKit and Opera sort of support transitioning from "auto" to a length for box offsets by treating "auto" as 0 when interpolating.  It gives broken behavior in most abs pos cases, but works correctly for rel pos.

David, is there more here than just a duplicate of bug 571344?

Chris, if this is your site you can work around this in the meantime by adding:

  top: 0;

to the .accessory_item styles so that the transition is explicitly between 0 and -240px.

Comment 2

[Boris Zbarsky [:bzbarsky]]

Attachment: Hack to give us the Opera/Webkit auto == 0 behavior for positioning properties

If we actually want to do this, I can turn this into a real patch.

Comment 3

[Michał Gołębiowski-Owczarek [:mgol]]

I don't know, I consider WebKit behavior here broken. I prefer no transitions at all between auto and number than treating auto as 0 that is mostly not correct. See the following test in Firefox & Chrome for example:
http://jsfiddle.net/m_gol/3hwjC/19/
Try clicking on the result area and see what happens; box should go smoothly up on the first click and down on the second one. Due to style batching and not treating auto as 0 in Firefox there is no 'going up' transition. In Chrome & Safari there are two transitions preceded by a weird jump from the bottom to the top of the page. It doesn't sound as a sane default.