1181509 - transition: width works sporadically, 1 in 10 times

Status: RESOLVED DUPLICATE of bug 537143

(Core :: CSS Parsing and Computation, defect)

Description

[Dan Dascalescu]

Attachment: transition-width-works-sporadically.gif

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/43.0.2357.132 Safari/537.36

Steps to reproduce:

Unfortunately I'm on a deadline and could only isolate the cause so much, but I found that Firefox doesn't usually animate the transition of the width property of an input element that goes from 0 to 50rem.

I suspect the culprit is this:

.button-to-input input {
  background: transparent;
  color: inherit;
  font-size: 1.3125rem;
  width: 0;
  transition: all 0.4s ease-in-out;
  outline: none;
  border: none;
  padding-left: 1.75rem;
  padding-right: 1.75rem;
  vertical-align: middle;
  box-shadow: 0 0 0 2px #96c8b4;
}
.button-to-input input.active {
  width: 50rem;
}


Here is a JSBin - http://jsbin.com/nixalo/edit?html,css,js,output. Again, apologies for not having time to trim it further. To make it faster to refresh the page, I've uploaded the code to http://idorecall.com/transition-width-broken-in-ff/.


Actual results:

9 out of 10 times, on the average, the transition is instant. Once in a while it does occur over the specified duration.


Expected results:

Tested in Firefox 39 and Firefox Developer Edition 41.0a2 (2015-07-04). Chrome 43 and IE11 transition correctly without fail.

Comment 1

[Boris Zbarsky [:bzbarsky]]

> Here is a JSBin - http://jsbin.com/nixalo/edit?html,css,js,output.

What are the steps to reproduce with that?  The input the transition on is hidden, and needs to become active to actually change width.

Are you perhaps unhiding the input and changing its width all at once and expecting the width to transition?

Comment 2

[Dan Dascalescu]

With http://jsbin.com/nixalo/edit?html,css,js,output, please click "Run with JS" until you see the bug when you click "I want early access" - i.e. the hidden email input becomes visible without a transition. I can reproduce this reliably in 41.0a2.

> Are you perhaps unhiding the input and changing its width all at once and expecting the width to transition?

Correct. Further simplified: http://jsbin.com/bezina/4/edit?html,css,js,output

Comment 3

[Boris Zbarsky [:bzbarsky]]

> Correct. 

OK.  That's the issue, then.  When the input is hidden it's display:none and has no computed width at all.  When you change the styles at the same time, there is no change of computed value; just a computation of a width.  So no transition.  Bug 537143 tracks changing this to work differently...