Issue metadata
Sign in to add a comment
|
No transition!
Reported by
jan77...@googlemail.com,
Dec 28 2016
|
||||||||||||||||||||||||
Issue description
Chrome Version : 55.0.2883.87
URLs (if applicable) :
Other browsers tested:
Add OK or FAIL, along with the version, after other browsers where you
have tested this issue:
Safari: NOT TESTED
Firefox: 50.1.0 FAIL
IE 11: OK
What steps will reproduce the problem?
(1) create a div (display: none, opacity: 0, transition: 1s opacity)
(2) Javascript function: get div -> style -> display: block, opacity: 1
(3) execute function
What is the expected result?
A smooth transition from opacity: 0 to opacity: 1
What happens instead?
No transition, it just "plopps" from 0 to 1 in Chrome and Firefox, IE and Edge working fine
Please provide any additional information below. Attach a screenshot if
possible.
Just ask me if you have some questions. No images attached, because the problem can't be shown with pictures.
,
Dec 29 2016
I attached a html-file which simply shows the issue (click on the button and you will see the issue).
This is the file:
<!--
Transition issue (Chrome 55.0.2883.87, Firefox 50.1.0)
author Jan Windhövel
PROBLEM: if a div is non-visible (display: none, opacity: 0) and gets visible through javascript (display: block, opacity: 1), transition is not working.
Just test the example below!
-->
<!doctype html>
<head>
<title>Transition Issue</title>
<style>
body {
margin: 0;
}
#black {
background-color: black;
display: none;
height: 100%;
opacity: 0;
position: fixed;
transition: 1s opacity;
width: 100%;
}
</style>
<script>
function f() {
document.getElementById("black").style.display = "block";
document.getElementById("black").style.opacity = 1;
}
function g() {
document.getElementById("black").style.opacity = 0;
setTimeout(h, 1000); // Timeout needed for transition time
}
function h() {
document.getElementById("black").style.display = "none";
}
</script>
</head>
<body>
<div id="black">
<p style="color: white">If the transition was smooth from white to black (duration: 1s), everything is fine. If not: issue found! Chrome and Firefox fail, IE 11 and Edge don't.</p>
<input onclick="g();" type="button" value="Click me again!">
</div>
<input onclick="f();" type="button" value="Click me!">
</body>
,
Jan 5 2017
Thank you for providing more feedback. Adding requester "brajkumar@chromium.org" for another review and adding "Needs-Review" label for tracking. For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
,
Jan 13 2017
Tested this issue on Windows-10 and Ubuntu 14.04 using chrome latest stable M55-55.0.2883.87. By opening the provided html file from comment #2 observed the transition is smooth from white to black in 1 sec. Reporter@- Thanks for the test case, Are you able to reproduce this issue consistently including incognito mode? Did you check this issue by creating a new profile? If issue persists on new profile, could you please let us know on which OS platform are you facing this issue? Thanks!
,
Jan 13 2017
I don't see the smooth transition on Ubunut 14.04 specifically from white to black. There is a smooth transition when it goes black to white (ie clicking "Click me again" works). Seems to be an issue with the display and the opacity both changing. It works correctly in Edge.
,
Jan 15 2017
|
|||||||||||||||||||||||||
►
Sign in to add a comment |
|||||||||||||||||||||||||
Comment 1 by brajkumar@chromium.org
, Dec 29 2016Labels: Needs-Feedback