transition: width works sporadically, 1 in 10 times

RESOLVED DUPLICATE of bug 537143

Status

()

Core
CSS Parsing and Computation
RESOLVED DUPLICATE of bug 537143
3 years ago
3 years ago

People

(Reporter: Dan Dascalescu, Unassigned, NeedInfo)

Tracking

41 Branch
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(1 attachment)

(Reporter)

Description

3 years ago
Created attachment 8630947 [details]
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.

Updated

3 years ago
Component: Untriaged → CSS Parsing and Computation
Product: Firefox → Core
> 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?
Flags: needinfo?(ddascalescu)
(Reporter)

Comment 2

3 years ago
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
> 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...
Status: UNCONFIRMED → RESOLVED
Last Resolved: 3 years ago
Resolution: --- → DUPLICATE
Duplicate of bug: 537143
You need to log in before you can comment on or make changes to this bug.