Layout of elements is delayed if an element has a style with a transition

When a visual element, in this case a button, has a style which has a transition-duration, the element is not instantly hidden/displayed when it’s display property is changed.

Instead the visibility change and associated layout operation is delayed by the transition-duration.

e.g. when an element with a style such as the one below has its display set to none, it will take 2 seconds for it to hide.

.issue-button {
transition-duration: 2s;
color: rgb(0, 127, 217);
}

This has been reported as IN-73881.

Thank you for the bug report! This is indeed a bug, the web specs say that display shouldn’t be animatable, and we’re following the spec unless we have good reasons to. This sounds like a simple oversight. Thanks!

In the meantime, you can use “transition-property: color” to work around the situation.