Applying a JavaScript className change and style.display = 'block' at the same time does not work

Question

I have the following CSS (3) class:

.VisiblePage
{
    -webkit-box-shadow: none;
    -webkit-transform: rotate(0deg);
}

In JavaScript I assign the class to a DOM element in a 'page' variable as follows:

page.className += " VisiblePage";

However, when I set the 'display' of the 'page' element to 'block' on the next line, the assignment of the VisiblePage class no longer results in its box-shadow and transform being applied:

page.className += " VisiblePage";
page.style.display = "block";

Changing the order of the two lines does not make a difference.

Does anyone have an explanation for this?

Currently I have an ugly workaround that works:

setTimeout(function () {
    page.className += " VisiblePage";
}, 0);
page.style.display = "block";

but I would like to get rid of it.

Answer 1

Following another question on stackoverflow and a blog post I conclude that CSS 3 transitions do not work (at least not in Chrome) when they are applied to elements that also have their CSS 'display' property set (at the same time). In my case the 'display' property of a 'page' element is set while that element also gets assigned a CSS class that defines a transition. Hence the transition does not work.

I have solved my problem by using the 'visibility' property instead of 'display'.