CSS transition works only if Chrome Dev Tools open

Question

I've run into a bizarre anomaly with CSS transitions. The transition is completely ignored on load; but if I open up Chrome Dev Tools and navigate the DOM tree to #popup > div > img and select it, then click on the main image, the transition becomes functional, and remains so even if Dev Tools is closed.

My suspicion is that I've made some weird mistake that I can't see. But when opening Dev Tools to try to probe my CSS makes it suddenly start working, it's a bit hard to debug!

Tested on Chrome 66.0.3359.139. The behaviour is the same in Codepen and as a stand-alone HTML file.

My intention is for clicking on the small image to show a larger one. With the popup visible, clicking anywhere will dismiss that popup. Both showing and dismissing the popup should transition smoothly; for this demo, that's an opacity change followed by a change to the image's top (making it scroll in from above the screen). The popup is controlled by setting a class on the HTML element.

 document.getElementById("clickme").onclick = function(ev) { document.documentElement.classList.add("show-modal"); ev.stopPropagation(); } document.documentElement.onclick = function() { this.classList.remove("show-modal"); } 

 #clickme { max-height: 300px; cursor: pointer; margin: 20px; border: 1px solid #ddd; border-radius: .25rem; padding: 10px; } #popup { position: fixed; width: 100%; height: 100%; left: 0; top: 0px; z-index: 2000; padding-top: 30px; display: none; } .show-modal #popup { display: block; } #popup img { display: block; margin: auto; position: relative; top: -500px; opacity: 0; transition: top .5s 1s, opacity .25s; } .show-modal #popup img { top: 0px; opacity: 1; } #popup>div { margin: auto; } 

 <p><img id=clickme src="http://devicatoutlet.com/img/birthday.png"></p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut euismod, ipsum at porttitor condimentum, turpis ex porta erat, et laoreet purus dui a quam. Vestibulum eget consequat neque, in faucibus turpis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent interdum sit amet odio eu consequat. Aliquam eget scelerisque odio. Suspendisse potenti. Aenean at risus a dolor facilisis dignissim. Sed et volutpat eros. Nam eget imperdiet lacus. Mauris imperdiet rutrum efficitur.</p> <div id="popup"> <div><img src="http://devicatoutlet.com/img/birthday.png"></div> </div> 

View on CodePen

Answer 1

CSS can't animate between display: none; and display: block; (of the #popup element). I changed to visibility for #popup .

You can see the new code here: https://codepen.io/anon/pen/KRoPwM . Hope this helps.