Is adding css styling to a HTML element through vanilla JavaScript async?

Question

fellow nerds, I recently stumbled across something rather strange, that essentially breaks the web app I'm working on... Which is that css attributes I add to an HTML element through (vanilla) javascript, seems to be async, to demonstrate that I have a small piece of code...

   ...

    _( leftView ).addClass('notrans');
    _( rightView ).addClass('notrans');

    if ( fromLeft ) {
        if ( !rightFocused ) {
            _( leftView ).css({ 'left' : '-100%' })
            _( rightView ).css({ 'left' : '-50%' });
        } else _( leftView ).css({ 'left' : '-50%' });
    }

    if ( fromRight ) {
        if ( !leftFocused ) {
            _( leftView ).css({ 'left' : '100%' });
            _( rightView ).css({ 'left' : '150%' });
        } else _( rightView ).css({ 'left' : '100%' });
    }

    _( leftView ).removeClass('notrans');
    _( rightView ).removeClass('notrans');

    ...

NOTE: The small underscore you see everywhere, is a small library I made and tested... And I'm 99% sure that the CSS, add class and remove class functions work.

Now, the problem is that when I get to the remove class part of the code ( last two lines ), the CSS doesn't seem to have been applied yet. So when it finally does, I will already have removed the notrans class, and the elements will move with a transition instead of none. This can be fixed with a 1ms timeout to the removal of the classes but will break some other stuff down the line... So is there anybody that knows if adding CSS attributes through JS is async, and how to fix it?:)

Aske K.

Can you show us the library code that actually adds and removes the styles? Also it's not vanilla, it's a library: it's just a library you wrote. — msanford
– msanford, Commented Apr 26, 2017 at 18:17
How many elements are being affected here? If there are a very large amount, lets say more than 5,000, then it is possible that the rendering engine hasn't finished rendering and calculating the changes made in the css. If it is more like 100 elements, then this is probably not the case. — Travis J
– Travis J, Commented Apr 26, 2017 at 18:19
@zfrisch - It wouldn't, but it would make it appear to not be synchronous. — Travis J
– Travis J, Commented Apr 26, 2017 at 18:22
@TravisJ It was actually only affecting 2 HTML element at the time of the testing, so it wasn't the problem, but anyway thanks. — Aske Lange
– Aske Lange, Commented Apr 26, 2017 at 18:27

Niet the Dark Absol · Accepted Answer · 2017-04-26 18:20:02Z

2

Yes and no.

When you have JavaScript making changes to the CSS, the changes are queued and then all applied together when the JavaScript is done.

Exception: certain properties cause a recalculation to be done. For example, getting measurements like offsetHeight causes the browser to apply any pending CSS changes, make the measurement, then continue.

However, I don't know for sure if transitions are properly applied even if a measurement is done. The easy way would be to make the removeClass async, by sticking it in setTimeout(... , 1) or (better) requestAnimationFrame (which is called the very next frame, well after the CSS has updated)

answered Apr 26, 2017 at 18:20

Niet the Dark Absol

326k86 gold badges480 silver badges604 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Aske Lange Over a year ago

Oh, thanks a lot, worked by just calling offsetHeight on the elements, even on transitions, you're a true hero:)

Travis J Over a year ago

To be honest, I actually wasn't aware that changes made to css during JS execution contexts were queued. Do you have any links for that so I can read a little more about it?

Niet the Dark Absol Over a year ago

@TravisJ I don't, unfortunately. It's just one of the things I've picked up in my experience, and I know I read it somewhere but it was a very long time ago.

Travis J Over a year ago

I found a list of them, although without much citation, on github here: gist.github.com/paulirish/5d52fb081b3570c81e3a . I was surprised to see .innerText on there.

Collectives™ on Stack Overflow

Is adding css styling to a HTML element through vanilla JavaScript async?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related