특정 webkit Browser를 강제로 repaint 하기

Mac OS Chrome 의 경우 일정 시간이 지나면 CSS3 의 Attribute Selector를 통해 선언한 content 가 Element에 적용되지 않는 경우가 있다. 이럴 경우 특정 Element 의 -webkit-transition 이나 -webkit-transform을 재 선언(혹은 추가)해 주면 Browser의 repaint 를 강제로 발생시켜 해당 문제를 해결할 수 있다.


- DOM

<element id="tElem" class="target" data-str=""></element>




- CSS

.target:after{ content : attr(str) }




- JavaScript

//force webkit browser repaint

document.body.style.cssText += '; -webkit-transform: none';


// Change element contents dynamically

var elem = document.getElementById('tElem');
elem.dataset.str = 'Variable Element Contens';