Closed Bug 1020518 Opened 9 years ago Closed 7 years ago

<section> element transition does not play if parent element explicitly has overflow:auto set

Categories

(Core :: CSS Parsing and Computation, defect)

Product:
Core
Component:
CSS Parsing and Computation
Version:
29 Branch
Platform:
x86
macOS
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

()

Status:
RESOLVED INCOMPLETE

People

(Reporter: dmurker, Unassigned, NeedInfo)

Details

(Keywords: testcase-wanted) 

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.114 Safari/537.36

Steps to reproduce:

html ->

<div id="container">
  <section id="sectionone"></section>
  <section id="sectiontwo"></section>
</div>


style.css contents

#container {
  height: 702px;
  overflow: auto;
}


#container #sectionone {
   width: 520px;
}

#container #sectiontwo {
   width: 0px;
   height: 672px;
   background-color: #ffffff;
   transition: width 4.5s;
}

#container.active {
  width: 520px;
}


Actual results:

using javascript to apply the 'active' class to div#container caused the width to instantaneously change instead of using the transition.


Expected results:

the width should have changed over the course of 4.5 seconds instead of instantaneously.  removing overflow:auto from the parent element allows firefox to use the transition.
That probably can be converted into two testcase files, with and without overflow:auto.
QA Whiteboard: [bugday-20140609]
Keywords: testcase-wanted
Component: Untriaged → CSS Parsing and Computation
Product: Firefox → Core
I must be missing something.  #container is what's having its width style change, but it has no transitions defined on it.  The thing with transitions defined on it has 0px width all along.  So I wouldn't expect to see any transitions here no matter what happens with the overflow style.

Daniel, are you sure you pasted the right CSS?  Can you please just attach a testcase showing this problem, using https://bugzilla.mozilla.org/attachment.cgi?bugid=1020518&action=enter
Flags: needinfo?(dmurker)
A possible extra test case, which seems to exhibit a similar problem: the transition doesn't work here either.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
#intro {
  background: #444;
  position: absolute;
  top: 0;
  left: 0;
  height: 90%;
  width: 100%;
  z-index: 2000;
      -webkit-transition: -webkit-transform 0.6s ease-out;
    -moz-transition: -moz-transform 0.6s ease-out;
    -o-transition: -o-transform 0.6s ease-out;
    transition: transform 0.6s ease-out;
}
  body.gone #intro {
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    transform: translateY(-100%);
}
  button {
    position: absolute; bottom: 10px; left: 10px;
  }
  
  /* The grey overlay doesn't smoothly scroll away, in Firefox only. */
  /* Remove these two lines to make the transition work in Firefox. */
  /* Why? Bizarre. */
  body { overflow: hidden; }
  body.gone { overflow: auto; }
</style>
</head>
<body>
<div id="intro"></div>
  <button onclick="document.body.classList.toggle('gone')">click to vanish</button>


</body>
</html>
Closing as incomplete the info is very old and requested information not provided - If this is still pertinent, please provide the information requested in Comment 2. Thanks.
Status: UNCONFIRMED → RESOLVED
Closed: 7 years ago
Resolution: --- → INCOMPLETE
You need to log in before you can comment on or make changes to this bug.