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

Question

I have some trivial JavaScript to effect a style change   sel   document getElementById  my id    sel className   sel className replace  item- 1-9 -selected   item-1-selected    return false    This works fine with the latest versions of FF  Opera and IE  but fails on the latest versions of Chrome and Safari   It affects two descendants  which happen to be siblings  The first sibling updates  but the second doesn   t  A child of the second element also has focus and contains the  lt a gt  tag that contains the above code in an onclick attribute   In the Chrome    Developer Tools    window if I nudge  e g  uncheck  amp  check  any attribute of any element  the second sibling updates to the correct style   Is there a workaround to easily and programmatically    nudge    WebKit into doing the right thing

User · Answer

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

User · Answer

This will force repaint while avoid flickering  existing element tinkering and any layout issue     function forceRepaint         requestAnimationFrame     gt         const e document createElement  DIV          e style  position fixed top 0 left 0 bottom 0 right 0 background  80808001                  pointer-events none z-index 9999999         document body appendChild e         requestAnimationFrame     gt e remove

User · Answer

I had this problem with a a number of divs that were inserted in another div with position  absolute  the inserted divs had no position attribute  When I changed this to position relative it worked fine   was really hard to pinpoint the problem   In my case the elements where inserted by Angular with ng-repeat

User · Answer

the  display offsetHeight  hack didn t work in my case  at least when it was applied to the element being animated   i had a dropdown menu that was being open closed over the page content  the artifacts were being left on the page content after the menu had closed  only in webkit browsers   the only way the  display offsetHeight  hack worked is if i applied it to the body  which seems nasty   however  i did find another solution    before the element starts animating  add a class that defines  -webkit-backface-visibility  hidden   on the element  you could also use inline style  i d guess  when it s done animating  remove the class  or style    this is still pretty hacky  it uses a CSS3 property to force hardware rendering   but at least it only affects the element in question  and worked for me on both safari and chrome on PC and Mac

User · Answer

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

User · Answer

I tried morewry answer but it does not work for me  I had trouble to have the same clientWidth with safari comparing to others browsers and this code solved the problem   var get safe value   function elm callback       var sty   elm style     sty transform    translateZ 1px        var ret   callback elm   you can get here the value you want     sty transform           return ret      for safari to have the good clientWidth var  fBody   document body   the element you need to fix var clientW   get safe value  fBody function elm  return  fBody clientWidth     It is really strange because if I try again to get the clientWidth after get safe value  I obtain a bad value with safari  the getter has to be between sty transform    translateZ 1px     and sty transform        The other solution that works definitively is  var  fBody   document body   the element you need to fix  fBody style display    none   var temp     body offsetHeight   fBody style display      temp     body offsetHeight   var clientW    fBody clientWidth   The problem is that you lose focus and scroll states

User · Answer

danorton solution didn t work for me  I had some really weird problems where webkit wouldn t draw some elements at all  where text in inputs wasn t updated until onblur  and changing className would not result in a redraw   My solution  I accidentally discovered  was to add a empty style element to the body  after the script    lt body gt       lt script gt doSomethingThatWebkitWillMessUp    lt  script gt   lt style gt  lt  style gt        That fixed it  How weird is that  Hope this is helpful for someone

User · Answer

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

User · Answer

I would recommend a less hackish and more formal way to force a reflow  use forceDOMReflowJS  In your case  your code would look as follows   sel   document getElementById  my id    forceReflowJS  sel    return false

User · Answer

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    lt div id  redraw-fix  gt  lt  div gt    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

User · Answer

This seems related to this  jQuery style not being applied in Safari  The solution suggested in the first response has worked well for me in these scenarios  namely  apply and remove a dummy class to the body after making the styling changes      body   addClass  dummyclass   removeClass  dummyclass      This forces safari to redraw

User · Answer

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

User · Answer

I found that just adding a content style to the element forced it to repaint  this should be a different value every time you want it to redraw and doesn t need to be on a pseudo element    selector       content   1

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

This is fine for JS  sel style display  none   sel offsetHeight     no need to store this anywhere  the reference is enough sel style display  block     But in Jquery  and particularly when you can only use   document  ready and cannot bind to a the  load event of an object for any particular reason  the following will work   You need to get the OUTER MOST  container of the objects divs and then remove all its contents into a variable  then re-add it  It will make ALL changes done within the outer container visible     document  ready function        applyStyling object       var node      div body div centerContainer form div centerHorizontal   parent   parent        var content   node html        node html          node html content

User · Answer

The only solution works for me is similar to sowasred2012 s answer      body   css  display    table   height       body   css  display    block      I have a lot of problem blocks on page  so I change display property of root element  And I use display  table  instead of display  none   because none will reset scrolling offset

User · Answer

I stumbled upon this today  Element redraw   for prototype js  Using    Element addMethods     redraw  function element       element     element       var n   document createTextNode           element appendChild n        function   n parentNode removeChild n    defer        return element            However  I ve noticed sometimes that you must call redraw   on the problematic element directly  Sometimes redrawing the parent element won t solve the problem the child is experiencing   Good article about the way browsers render elements  Rendering  repaint  reflow relayout  restyle

User · Answer

We recently encountered this and discovered that promoting the affected element to a composite layer with translateZ in CSS fixed the issue without needing extra JavaScript    willnotrender       transform  translateZ 0        As these painting issues show up mostly in Webkit Blink  and this fix mostly targets Webkit Blink  it s preferable in some cases   Especially since the accepted answer almost certainly causes a reflow and repaint  not just a repaint   Webkit and Blink have been working hard on rendering performance  and these kinds of glitches are the unfortunate side effect of optimizations that aim to reduce unnecessary flows and paints   CSS will-change or another succeeding specification will be the future solution  most likely   There are other ways to achieve a composite layer  but this is the most common

User · Answer

I am working on ionic html5 app  on few screens i have absolute positioned element  when scroll up or down in IOS devices  iPhone 4 5 6  6  i had repaint bug   Tried many solution none of them was working except this one solve my problem   I have use css class  fixRepaint on those absolute positions elements    fixRepaint      transform  translateZ 0       This has fixed my problem  it may be help some one

User · Answer

I was having an issue with an SVG that was disappearing on Chrome for Android when the orientation was changed in certain circumstances  The below code doesn t reproduce it  but is the setup we had    x000D   x000D  body   x000D    font-family  tahoma  sans-serif  x000D    font-size  12px  x000D    margin  10px  x000D    x000D  article   x000D    display  flex  x000D    x000D  aside   x000D    flex  0 1 10px  x000D    margin-right  10px  x000D    min-width  10px  x000D    position  relative  x000D    x000D  svg   x000D    bottom  0  x000D    left  0  x000D    position  absolute  x000D    right  0  x000D    top  0  x000D    x000D   backgroundStop1   x000D    stop-color   5bb79e  x000D    x000D   backgroundStop2   x000D    stop-color   ddcb3f  x000D    x000D   backgroundStop3   x000D    stop-color   cf6b19  x000D    x000D   lt article gt  x000D     lt aside gt  x000D       lt svg version  1 1  xmlns  http   www w3 org 2000 svg  xmlns xlink  http   www w3 org 1999 xlink  height  100   width  100   gt  x000D         lt defs gt  x000D           lt linearGradient id  IndicatorColourPattern  x1  0  x2  0  y1  0  y2  1  gt  x000D             lt stop class  backgroundStop1  offset  0   gt  lt  stop gt  x000D             lt stop class  backgroundStop2  offset  50   gt  lt  stop gt  x000D             lt stop class  backgroundStop3  offset  100   gt  lt  stop gt  x000D           lt  linearGradient gt  x000D         lt  defs gt  x000D         lt rect x  0  y  0  rx  5  ry  5  width  100   height  100   fill  url  IndicatorColourPattern   gt  lt  rect gt  x000D       lt  svg gt  x000D     lt  aside gt  x000D     lt section gt  x000D       lt p gt Donec et eros nibh  Nullam porta  elit ut sagittis pulvinar  lacus augue lobortis mauris  sed sollicitudin elit orci non massa  Proin condimentum in nibh sed vestibulum  Donec accumsan fringilla est  porttitor vestibulum dolor ornare id  Sed elementum x000D        urna sollicitudin commodo ultricies  Curabitur tristique orci et ligula interdum  eu condimentum metus eleifend  Nam libero augue  pharetra at maximus in  pellentesque imperdiet orci  lt  p gt  x000D       lt p gt Fusce commodo ullamcorper ullamcorper  Etiam eget pellentesque quam  id sodales erat  Vestibulum risus magna  efficitur sed nisl et  rutrum consectetur odio  Sed at lorem non ligula consequat tempus vel nec risus  lt  p gt  x000D     lt  section gt  x000D   lt  article gt  x000D   x000D   x000D    Day and half later after poking and prodding and not happy with the hacky solutions offered here  I discovered that the issue was caused by the fact it seemed to keep the element in memory while drawing a new one  The solution was to make the ID of the linearGradient on the SVG unique  even though it was only ever used once per page   This can be achieved many different ways  but for our angular app we used lodash uniqueId function to add a variable to the scope   Angular Directive  JS    scope indicatorColourPatternId     uniqueId  IndicatorColourPattern      HTML Updates   Line 5   lt linearGradient ng-attr-id    indicatorColourPatternId    x1  0  x2  0  y1  0  y2  1  gt   Line 11   lt rect x  0  y  0  rx  5  ry  5  width  100   height  100   ng-attr-fill  url    indicatorColourPatternId      gt   I hope this answer saves someone else a days worth of face-smashing their keyboard

User · Answer

Since everyone seems to have their own problems and solutions  I figured I d add something that works for me   On Android 4 1 with current Chrome  trying to drag a canvas around inside a div with overflow hidden  I couldn t get a redraw unless I added an element to the parent div  where it wouldn t do any harm    var parelt   document getElementById  parentid    var remElt   document getElementById  removeMe    var addElt   document createElement  div    addElt innerHTML           Won t work if empty addElt id  removeMe   if  remElt        parelt replaceChild addElt  remElt     else       parelt appendChild addElt       No screen flicker or real update  and cleaning up after myself   No global or class scoped variables  just locals   Doesn t seem to hurt anything on Mobile Safari iPad or desktop browsers

User · Answer

above suggestions didnt work for me  but the below one does   Want to change the text inside the anchor dynamically  The word  Search   Created an inner tag  font  with an id attribute  Managed the contents using javascript  below    Search   script contents       var searchText    Search       var editSearchText    Edit Search       var currentSearchText   searchText       function doSearch             if  currentSearchText    searchText                    pSearch   panel  close                currentSearchText   editSearchText            else if  currentSearchText    editSearchText                    pSearch   panel  open                currentSearchText   searchText                        searchtxt   text currentSearchText

User · Answer

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

User · Answer

I came up here because I needed to redraw scrollbars in Chrome after changing its css   If someone s having the same problem  I solved it by calling this function     Hack to force scroll redraw function scrollReDraw            body   css  overflow    hidden   height           body   css  overflow    auto        This method is not the best solution  but it may work with everything  hiding and showing the element that needs to be redraw may solve every problem   Here is the fiddle where I used it  http   jsfiddle net promatik wZwJz 18

User · Answer

I found some complicated suggestions and many simple ones that didn   t work  but a comment to one of them by Vasil Dinkov provided a simple solution to force a redraw repaint that works just fine   sel style display  none   sel offsetHeight     no need to store this anywhere  the reference is enough sel style display       I   ll let someone else comment if it works for styles other than    block      Thanks  Vasil

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

Examples related to css

Examples related to google-chrome

Examples related to safari

Examples related to webkit