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

后端 未结 27 2300
我寻月下人不归
我寻月下人不归 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:31

    For some reason I couldn't get danorton's answer to work, I could see what it was supposed to do so I tweaked it a little bit to this:

    $('#foo').css('display', 'none').height();
    $('#foo').css('display', 'block');
    

    and it worked for me.

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

    I use the transform: translateZ(0); method but in some cases it is not sufficient.

    I'm not fan of adding and removing a class so i tried to find way to solve this and ended up with a new hack that works well :

    @keyframes redraw{
        0% {opacity: 1;}
        100% {opacity: .99;}
    }
    
    // ios redraw fix
    animation: redraw 1s linear infinite;
    
    0 讨论(0)
  • 2020-11-22 02:35

    Since the display + offset trigger didn't work for me, I found a solution here:

    http://mir.aculo.us/2009/09/25/force-redraw-dom-technique-for-webkit-based-browsers/

    i.e.

    element.style.webkitTransform = 'scale(1)';
    
    0 讨论(0)
  • 2020-11-22 02:35

    I cannot believe this is still a problem in 2014. I just had this issue when refreshing a fixed position caption box on the lower-left hand of the page while scrolling, the caption would 'ghost' its way up the screen. After trying everything above without success, I noticed a lot of things were either slow/causing issues due to creating very short DOM relayouts etc causing somewhat unnatural feeling scrolling etc...

    I ended up making a fixed position, full-size div with pointer-events: none and applying danorton's answer to that element, which seems to force a redraw on the whole screen without interfering with the DOM.

    HTML:

    <div id="redraw-fix"></div>
    

    CSS:

    div#redraw-fix {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 25;
        pointer-events: none;
        display: block;
    }
    

    JS:

    sel = document.getElementById('redraw-fix');
    sel.style.display='none';
    sel.offsetHeight; // no need to store this anywhere, the reference is enough
    sel.style.display='block';
    
    0 讨论(0)
  • 2020-11-22 02:36

    The following works. It only has to be set once in pure CSS. And it works more reliably than a JS function. Performance seems unaffected.

    @-webkit-keyframes androidBugfix {from { padding: 0; } to { padding: 0; }}
    body { -webkit-animation: androidBugfix infinite 1s; }
    
    0 讨论(0)
  • 2020-11-22 02:36

    A simple solution with jquery:

    $el.html($el.html());
    

    or

    element.innerHTML = element.innerHTML;
    

    Had an SVG that wasn't showing when it was added to the html.

    This can be added after the svg elements are on the screen.

    Better solution is to use:

    document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    

    and with jQuery:

    $(svgDiv).append($(document.createElementNS('http://www.w3.org/2000/svg', 'g'));
    

    this will render correctly on Chrome.

    0 讨论(0)
提交回复
热议问题