CSS fade not working in Chrome

I wrote this function in javascript:

function unhide(el, dur = 300, display = "block") {
    el.style.display = display;
    el.style.transitionDuration = dur + "ms";
    el.style.opacity = 1;
}

For some reason, this isn't working in Chrome.

I remember having a problem like this, due to the browser not applying Javascript-written CSS atomically.

So, I tried putting a break point after the display was changed:

function unhide(el, dur = 300, display = "block") {
    el.style.display = display;
●   el.style.transitionDuration = dur + "ms";
    el.style.opacity = 1;
}

This fixed the problem.

This same issue occurs in FireFox, but not Microsoft edge.

How can I fix this?

Is there a way to force the browser to apply the display, and then the opacity?

I just thought about using a setTimeout (for setting the opacity, because, again, the display is not atomically applied), however, that seems like a messy/inefficient hack.