How can I force WebKit to redraw/repaint to propagate style changes?

后端 未结 27 2289
我寻月下人不归
我寻月下人不归 2020-11-22 02:04

I have some trivial JavaScript to effect a style change:

sel = document.getElementById(\'my_id\');
sel.className = sel.className.replace(/item-[1-9]-selected         


        
相关标签:
27条回答
  • 2020-11-22 02:46

    I was suffering the same issue. danorton's 'toggling display' fix did work for me when added to the step function of my animation but I was concerned about performance and I looked for other options.

    In my circumstance the element which wasn't repainting was within an absolutely position element which did not, at the time, have a z-index. Adding a z-index to this element changed the behaviour of Chrome and repaints happened as expected -> animations became smooth.

    I doubt that this is a panacea, I imagine it depends why Chrome has chosen not to redraw the element but I'm posting this specific solution here in the help it hopes someone.

    Cheers, Rob

    tl;dr >> Try adding a z-index to the element or a parent thereof.

    0 讨论(0)
  • 2020-11-22 02:47

    Not that this question needs another answer, but I found simply changing the color by a single bit forced a repaint in my particular situation.

    //Assuming black is the starting color, we tweak it by a single bit
    elem.style.color = '#000001';
    
    //Change back to black
    setTimeout(function() {
        elem.style.color = '#000000';
    }, 0);
    

    The setTimeout proved critical to move the second style change outside the current event loop.

    0 讨论(0)
  • 2020-11-22 02:48

    I've found this method to be useful when working with transitions

    $element[0].style.display = 'table'; 
    $element[0].offsetWidth; // force reflow
    $element.one($.support.transition.end, function () { 
        $element[0].style.display = 'block'; 
    });
    
    0 讨论(0)
提交回复
热议问题