WebKit이 스타일 변경을 전파하기 위해 다시 그리거나 다시 그리도록하려면 어떻게해야합니까?

247

스타일 변경에 영향을주는 간단한 JavaScript가 있습니다.

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

이것은 최신 버전의 FF, Opera 및 IE에서는 잘 작동하지만 최신 버전의 Chrome 및 Safari에서는 실패합니다.

형제 자매 인 두 자손에게 영향을 미칩니다. 첫 번째 형제는 업데이트되지만 두 번째 형제는 업데이트되지 않습니다. 두 번째 요소의 자식도 포커스를 가지며 위의 코드를 포함하는 <a> 태그를 포함합니다. onclick 속성 합니다.

크롬 "개발 도구"창에서 나는 조금씩 이동하는 경우 (예를 들어, 선택 해제 및 검사) 어떤 의 속성 모든 요소가 올바른 스타일의 두 번째 형제 업데이트를.

WebKit을 올바른 프로그래밍 방식으로 쉽고 프로그래밍 방식으로 "nudge"하는 해결 방법이 있습니까?

css  google-chrome  safari  webkit 
— Danorton
소스
캔버스 앱을 WebView로 래핑 할 때 Android 4.2.2 (Samsung I9500) 에서이 문제가 발생한다고 생각합니다. 어리석은!
— Josh
3
what-forces-layout.md 아주 좋은 독서 장소
— vsync

답변:

312

나는 복잡한 제안과 작동하지 않는 많은 간단한 제안을 찾았지만 Vasil Dinkov 의 의견 중 하나 는 다시 그리기 / 다시 그리기를 강제로 수행하는 간단한 솔루션을 제공했습니다.

sel.style.display='none';
sel.offsetHeight; // no need to store this anywhere, the reference is enough
sel.style.display='';

"block"이외의 다른 스타일에 효과가 있다면 다른 사람이 댓글을 달도록하겠습니다.

고마워, 바실!

— Danorton
소스
32
당신이 시도 할 수 깜박임 방지하기 위해 'inline-block', 'table'또는 'run-in'대신에 'none', 그러나 이것은 부작용이있을 수 있습니다. 또한 시간이 0이면 쿼리처럼 리플 로우가 트리거됩니다 offsetHeight.sel.style.display = 'run-in'; setTimeout(function () { sel.style.display = 'block'; }, 0);
— user123444555621
15
이 답변은 2 년 후에도 여전히 유용합니다. 방금 브라우저를 특정 방식으로 크기 조정 한 후 CSS 상자 그림자가 화면에 남아있는 Chrome 전용 문제를 해결하는 데 사용했습니다. 감사!
— rkulla
5
@danorton 당신은 2010 년에 답했습니다. 2013 년인데 버그가 아직 남아 있습니다. 감사. 그건 그렇고, 웹킷 추적기에 등록 된 문제가 있는지 아는 사람이 있습니까?
— RaphaelDDL
13
추신 : 나를 위해 위의 솔루션은 더 이상 작동하지 않았습니다. 대신 나는 이것을 사용했다 (jQuery) : sel.hide (). show (0); 출처 : stackoverflow.com/questions/8840580/…
— ProblemsOfSumit
7
당신이해야 할 모든 크기 속성을 읽고, 당신은 앞뒤로 변경할 필요가 없습니다.
— Andrew Bullock
93

최근에이 문제가 발생하여 CSS에서 translateZ 를 사용하여 영향을받는 요소를 복합 레이어 로 승격하면 추가 JavaScript 없이도 문제가 해결되는 것으로 나타났습니다.

.willnotrender { 
   transform: translateZ(0); 
}

이러한 페인팅 문제는 주로 Webkit / Blink에 표시되며이 수정은 대부분 Webkit / Blink를 대상으로하기 때문에 경우에 따라 선호됩니다. 허용 대답은 거의 확실 원인이 특히 이후 리플 로우 및 다시 그리기 , 하지 만 다시 그리기를.

Webkit과 Blink는 렌더링 성능을 위해 열심히 노력해 왔으며 이러한 종류의 결함은 불필요한 흐름과 페인트를 줄이는 것을 목표로 한 최적화의 부작용입니다. CSS가 변경 되거나 다른 사양이 향후 솔루션이 될 것입니다.

복합 레이어를 달성하는 다른 방법이 있지만 이것이 가장 일반적입니다.

— 모호한
소스
1
각도 회전 목마를 사용할 때 나를 위해 일했습니다 !
— gustavohenke
1
슬라이딩 패널 내부의 요소에서 경계 반경이 손실되는 문제를 해결했습니다.
— Timo
1
코르도바 프로젝트에도 적합합니다!
— Quispie
1
새로 고쳐지지 않은 -webkit-line-clamp를 위해 저를 위해 일했습니다
— Adam Marshall
1
-webkit-transform : translate (-50 %, -50 %)을 사용하여 ipad (6.0)에서 나를 위해 일했습니다.
— Lain
51

danorton 솔루션이 효과가 없었습니다. 웹킷이 일부 요소를 전혀 그리지 않는 이상한 문제가있었습니다. 입력의 텍스트는 onblur까지 업데이트되지 않았습니다. className을 변경해도 다시 그려지지 않습니다.

내가 우연히 발견 한 내 솔루션은 스크립트 뒤에 빈 스타일 요소를 본문에 추가하는 것이 었습니다.

<body>
...
<script>doSomethingThatWebkitWillMessUp();</script>
<style></style>
...

그것은 그것을 고쳤다. 얼마나 이상합니까? 이것이 누군가에게 도움이되기를 바랍니다.

— 거벤
소스
3
내가 할 수 있다면 1,000,000 번 공표 했어 이것은 내가 끌고있는 어리석은 div를 다시 칠하기 위해 크롬을 얻을 수있는 유일한 방법입니다. 그건 그렇고, 어떤 요소가 작동하는지 스타일 요소를 추가 할 필요는 없습니다 (적어도 나는하지 않았습니다). 나는 div를 만들고 id를 부여하여 DOM을 쓸모없는 태그로 채우지 않도록 각 단계에서 요소를 삭제 한 다음 추가 할 수 있습니다.
— hobberwickey
6
방금 다른 답변에 대한 Pumbaa80의 의견과 함께 이것을 사용했습니다. 내가 끝내 var div = $('<div>').appendTo(element); setTimeout(function(){ div.remove(); }, 0);
— 었던 해결책
33
이 한 줄은 나를 위해 잘 작동합니다! $('<style></style>').appendTo($(document.body)).remove();
— pdelanauze
1
@ pdelanauze 답변은 완벽하게 작동합니다. css3 translate and ios에서 redraw 문제가 있습니다.
— Marcel Falliere
11
대부분의 경우 페이지의 특정 부분 만 다시 칠하고 싶을
— 때이 방법
33

디스플레이 + 오프셋 트리거가 작동하지 않으므로 여기에서 해결책을 찾았습니다.

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

즉

element.style.webkitTransform = 'scale(1)';
— EricG
소스
3
나는 이것을 시도한 해킹에서 이것을 사용했지만 대신에 scale(1)로 지정했습니다 element.style.webkitTransform = element.style.webkitTransform. 이것을 전자로 설정 한 이유는 absolute위치가 지정된 요소에 대해 페이지가 약간 왜곡 된 것입니다 !
— bPratik
이것은 나를 위해 일했으며 display솔루션이했던 스크롤 위치를 깜박이거나 재설정하는 데 문제 가 없었습니다.
— davidtbernal
많은 동적 SVG를 사용하는 Cordova 앱이 있습니다. 시작시 SVG 요소를 표시하지 않으면 iOS7을 제외한 모든 곳에서 잘 작동했습니다. 간단한 $ ( 'body') [0] .style.webkitTransform = 'scale (1)';을 추가했습니다. 초기화 코드에 문제가 사라졌습니다!
— Herc
최신 Safari 및 iOS에서는 현재 작동하지 않습니다.
— setholopolus
@setholopolus 어떤 versoin (s)입니까?
— EricG
23

나는 같은 문제를 겪고 있었다. danorton의 'toggling display'수정은 애니메이션의 단계 기능에 추가되었을 때 저에게 효과적이지만 성능에 관심이 있었고 다른 옵션을 찾았습니다.

내 상황에서 다시 칠하지 않은 요소는 당시 z- 색인이없는 절대 위치 요소 내에있었습니다. 이 요소에 z- 색인을 추가하면 Chrome의 동작이 변경되고 예상대로 애니메이션이 부드럽게 다시 그려집니다.

이것이 만병 통치약인지 의심합니다 .Chrome이 요소를 다시 그리지 않기로 선택한 이유에 달려 있다고 생각합니다. 그러나이 특정 솔루션을 누군가를 돕기 위해 여기에 게시하고 있습니다.

건배, 롭

tl; dr >> 요소 또는 그 부모에 z- 색인을 추가하십시오.

— 롭 머피
소스
8
훌륭한. 이것은 훌륭하고 나를 위해 문제를 해결했습니다. A +++는 다시 z-index입니다.
— trisweb
스크롤 막대와 변형을 다루는 상황에서는 작동하지 않았습니다.
— Ricky Boyce
16

다음과 같이 작동합니다. 순수 CSS에서는 한 번만 설정하면됩니다. 그리고 그것은 JS 함수보다 더 안정적으로 작동합니다. 성능에는 영향을 미치지 않습니다.

@-webkit-keyframes androidBugfix {from { padding: 0; } to { padding: 0; }}
body { -webkit-animation: androidBugfix infinite 1s; }
— 쐐기
소스
그것이 나를 위해 일하는 것 같습니다. 이를 통해 Mobile Safari의 렌더링 문제를 해결하는 데 사용
— Chris
이것은 내 문제를 해결하고, Safari가 강제로 릴레이되도록합니다. 그러나 zoom패딩 대신에 사용 했습니다.@-webkit-keyframes safariBugFix {from { zoom: 100%; } to { zoom: 99.99999%; }}
— Ahmed Musallam
13

어떤 이유로 나는 danorton의 대답을 얻을 수 없었습니다.

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

그리고 그것은 나를 위해 일했습니다.

— sowasred2012
소스
7
나는이 이상의 모든 것을 시도했지만이 하나만 나를 위해 일했다. WTF 웹킷! 이것은 컴퓨터 과학이 아닙니다! 이것은 흑 마법입니다!
— Charlie Martin
7

CSS를 변경 한 후 Chrome에서 스크롤 막대를 다시 그려야하기 때문에 여기에 왔습니다.

누군가 같은 문제가 발생하면이 함수를 호출하여 문제를 해결했습니다.

//Hack to force scroll redraw
function scrollReDraw() {
    $('body').css('overflow', 'hidden').height();
    $('body').css('overflow', 'auto');
}

이 방법은 최선의 해결 방법은 아니지만 다시 작성해야하는 요소를 숨기거나 표시하면 모든 문제를 해결할 수 있습니다.

여기 내가 사용한 바이올린이 있습니다 : http://jsfiddle.net/promatik/wZwJz/18/

— 안토니오 알메이다
소스
1
큰! 스크롤바에도 애니메이션을 적용하려고했는데 이것이 바로 필요한 것입니다! 애니메이션 스크롤바를위한 오버레이 : BTW를보다 효율적으로 사용하는 오버 플로우
— ekalchev
6

나는 오늘 이것을 우연히 발견했다 : prototype.js를위한 Element.redraw ()

사용 : 

Element.addMethods({
  redraw: function(element){
    element = $(element);
    var n = document.createTextNode(' ');
    element.appendChild(n);
    (function(){n.parentNode.removeChild(n)}).defer();
    return element;
  }
});

그러나 문제가있는 요소에서 redraw ()를 직접 호출 해야하는 경우가 있습니다. 때로는 부모 요소를 다시 그리더라도 아이가 겪고있는 문제가 해결되지 않습니다.

브라우저가 요소를 렌더링하는 방법에 대한 좋은 기사 : 렌더링 : 다시 그리기, 리플 로우 / 릴레이 아웃, 스타일 변경

— 아담 에블린
소스
1
appendChildjQuery 메소드가 아닌 DOM 메소드입니다.
— ChrisW
4

와 함께 다른 div에 삽입 된 많은 div 에이 문제가 있었고 삽입 position: absolute된 div에는 위치 속성이 없었습니다. 내가 이것을 바꿨을 때 position:relative잘 작동했습니다. (문제를 정확히 지적하기가 어려웠습니다)

제 경우에는 Angular와 함께 삽입 된 요소입니다 ng-repeat.

— JustGoscha
소스
1
감사! 이것은 내 문제에 대해서도 효과가 있었고 위의 많은 자바 스크립트 솔루션보다 훨씬 가볍습니다.
— Dsyko
4

나는 이것이 2014 년에도 여전히 문제가 있다고 믿을 수 없다. 나는 스크롤하는 동안 페이지의 왼쪽 하단에 고정 위치 캡션 상자를 새로 고칠 때 캡션이 화면 위로 올라갈 때이 문제가 발생했다. 위의 모든 것을 성공적으로 시도한 후 DOM 릴레이 아웃이 매우 짧아 부 자연스러운 느낌의 스크롤링 등을 유발하여 느리거나 원인이되는 문제가 많이 발견되었습니다.

나는 고정 된 위치, 풀 사이즈 div를 작성 pointer-events: none하고 그 요소에 danorton의 대답을 적용하여 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';
— waffl
소스
나를 위해 일한 유일한 해결 방법에 대해 충분히 감사 할 수 없습니다. 예, 2017 년이며 문제는 계속 남아 있습니다. 내 문제는 Android 모바일 장치에서 수동으로 새로 고치면 비워지는 RTL 언어 페이지와 관련이 있습니다. z-index및 pointer-events규칙은 여기에 불필요한 있습니다.
— Amin Mozafari
나는 전에 danorton의 수정 프로그램을 사용했지만 실제로 디스플레이 설정에서 없음으로 내용의 플래시로 어려움을 겪고있었습니다. 귀하의 솔루션은 콘텐츠 플래시없이 저에게 큰 도움이되었습니다!
— 저스틴 노엘
3

이 질문에는 또 다른 대답이 필요하지는 않지만 특정 상황에서 단일 비트로 색상을 변경하면 다시 칠해야한다는 것을 알았습니다.

//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);

는 setTimeout현재 이벤트 루프 밖에서 두 번째 스타일의 변화를 이동하는 것이 중요 입증했다.

— TMan
소스
1
시간 초과를 0으로 설정하면 다른 상황이나 비슷한 상황에서 유용합니다. jquery의 눈에 띄지 않는 유효성 검사가 큰 양식을 구문 분석하는 동안 화면이 멈추기 전에 다시 그리기가 발생하지 않았습니다. 같은 상황에 처한 사람이있을 경우에 의견을 줄 것이라고 생각했습니다. 이 시나리오에서는 다른 솔루션이 작동하지 않았습니다.
— k29
2

나를 위해 유일한 해결책은 sowasred2012의 답변과 비슷합니다.

$('body').css('display', 'table').height();
$('body').css('display', 'block');

페이지에 많은 문제 블록이 있으므로 display루트 요소의 속성을 변경 합니다. 스크롤 오프셋을 재설정 하기 때문에 display: table;대신에을 사용 합니다 .display: none;none

— 일리아 스 비리 덴코
소스
2

transform: translateZ(0);방법을 사용 하지만 경우에 따라 충분하지 않습니다.

나는 클래스를 추가하고 제거하는 것을 좋아하지 않으므로 이것을 해결하는 방법을 찾으려고 노력한 새로운 해킹으로 끝났습니다.

@keyframes redraw{
    0% {opacity: 1;}
    100% {opacity: .99;}
}

// ios redraw fix
animation: redraw 1s linear infinite;
— 기 illa 고티에
소스
1

모든 사람이 자신의 문제와 해결책을 가지고있는 것 같아서, 나에게 맞는 것을 추가 할 것이라고 생각했습니다. 현재 Chrome이있는 Android 4.1에서 overflow : hidden으로 div 내부에서 캔버스를 드래그하려고하면 부모 div에 요소를 추가하지 않으면 다시 그릴 수 없었습니다 (해를 끼치 지 않을 것입니다).

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);
}

화면 깜박임이나 실제 업데이트가 없으며 나 자신을 청소하십시오. 전역 또는 클래스 범위 변수가 없으며 지역 변수 만 있습니다. Mobile Safari / iPad 또는 데스크탑 브라우저에서 아무것도 아프지 않은 것 같습니다.

— 에릭 럭
소스
1

나는 몇 화면에서 이온 html5 앱을 작업 중입니다. absoluteIOS 장치 (iPhone 4,5,6, 6+)에서 위로 또는 아래로 스크롤 할 때 요소를 배치 한 .iPhone 버그를 다시 칠했습니다.

많은 해결책을 시도했지만이 문제가 내 문제를 해결하는 것 외에는 아무것도 작동하지 않았습니다.

.fixRepaint절대 위치 요소에 CSS 클래스 를 사용했습니다.

.fixRepaint{
    transform: translateZ(0);
}

이것은 내 문제를 해결했으며 일부 도움이 될 수 있습니다.

— 안주 ....
소스
1
내가 보지 못한 방법을 선택하십시오. @morewry 지적 해 주셔서 감사합니다
— Anjum ....
0

이것은 JS에 좋습니다

sel.style.display='none';
sel.offsetHeight; // no need to store this anywhere, the reference is enough
sel.style.display='block';

그러나 Jquery에서, 특히 $ (document) .ready 만 사용할 수 있고 특정 이유로 객체의 .load 이벤트에 바인딩 할 수없는 경우 다음이 작동합니다.

객체 / div의 OUTER (MOST) 컨테이너를 가져 와서 모든 내용을 변수로 제거한 다음 다시 추가해야합니다. 외부 컨테이너 내에서 수행 된 모든 변경 사항이 표시됩니다.

$(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);
}
— WiR3D
소스
0

전환으로 작업 할 때이 방법이 유용하다는 것을 알았습니다.

$element[0].style.display = 'table'; 
$element[0].offsetWidth; // force reflow
$element.one($.support.transition.end, function () { 
    $element[0].style.display = 'block'; 
});
— jschr
소스
0

내 경우에는 적어도 "애니메이션 / 요소에 적용 할 때"display / offsetHeight "핵이 작동하지 않았습니다.

페이지 내용을 열고 닫는 드롭 다운 메뉴가 있습니다. 메뉴가 닫힌 후 페이지 컨텐츠에 아티팩트가 남아있었습니다 (웹킷 브라우저에서만). "display / offsetHeight"핵이 작동 한 유일한 방법은 내가 그것을 몸에 적용하는 것입니다.

그러나 다른 해결책을 찾았습니다.

  1. 요소가 애니메이션을 시작하기 전에 "-webkit-backface-visibility : hidden;"을 정의하는 클래스를 추가하십시오. 요소에 (인라인 스타일을 사용할 수도 있습니다.)
  2. 애니메이션이 끝나면 클래스 또는 스타일을 제거하십시오.

이것은 여전히 ​​해킹 적이지만 (하드웨어 렌더링을 강제하기 위해 CSS3 속성을 사용합니다) 적어도 문제의 요소에만 영향을 미치며 PC와 Mac의 Safari 및 Chrome 모두에서 저에게 효과적이었습니다.

— 테드 슨
소스
0

이것은 이것과 관련이있는 것 같습니다 : jQuery 스타일 Safari에 적용되지 않는

첫 번째 응답에서 제안 된 솔루션은 이러한 시나리오에서 나에게 효과적이었습니다. 즉 스타일을 변경 한 후 더미 클래스를 본문에 적용하고 제거하십시오.

$('body').addClass('dummyclass').removeClass('dummyclass');

이로 인해 사파리가 다시 그려집니다.

— 스티브
소스
Chrome 에서이 기능을 사용하려면 다음을 추가해야했습니다. $ ( 'body'). addClass ( 'dummyclass'). delay (0) .removeClass ( 'dummyclass');
— mbokil
0

위의 제안은 저에게 효과적이지 않았습니다. 그러나 아래는 그렇습니다.

앵커 내부의 텍스트를 동적으로 변경하고 싶습니다. "검색"이라는 단어. id 속성으로 내부 태그 "font"를 작성했습니다. 자바 스크립트 (아래)를 사용하여 내용 관리

검색

스크립트 내용 :

    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);
    }
— 가네쉬
소스
0

특정 상황에서 방향이 변경되면 Android 용 Chrome에서 사라지는 SVG 문제가 발생했습니다. 아래 코드는 그것을 재현하지 않지만 우리가 가진 설정입니다.

body {
  font-family: tahoma, sans-serif;
  font-size: 12px;
  margin: 10px;
}
article {
  display: flex;
}
aside {
  flex: 0 1 10px;
  margin-right: 10px;
  min-width: 10px;
  position: relative;
}
svg {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}
.backgroundStop1 {
  stop-color: #5bb79e;
}
.backgroundStop2 {
  stop-color: #ddcb3f;
}
.backgroundStop3 {
  stop-color: #cf6b19;
}
<article>
  <aside>
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="100%" width="100%">
      <defs>
        <linearGradient id="IndicatorColourPattern" x1="0" x2="0" y1="0" y2="1">
          <stop class="backgroundStop1" offset="0%"></stop>
          <stop class="backgroundStop2" offset="50%"></stop>
          <stop class="backgroundStop3" offset="100%"></stop>
        </linearGradient>
      </defs>
      <rect x="0" y="0" rx="5" ry="5" width="100%" height="100%" fill="url(#IndicatorColourPattern)"></rect>
    </svg>
  </aside>
  <section>
    <p>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
      urna sollicitudin commodo ultricies. Curabitur tristique orci et ligula interdum, eu condimentum metus eleifend. Nam libero augue, pharetra at maximus in, pellentesque imperdiet orci.</p>
    <p>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.</p>
  </section>
</article>
스 니펫 확장

일주일 후 파고 들고 prodding 후 여기에 제공된 해키 솔루션에 만족하지 못했지만 , 문제는 새로운 요소를 그리는 동안 요소를 메모리에 유지하는 것처럼 보였기 때문에 발생했습니다. 해결책은 SVG에서 linearGradient의 ID를 페이지 당 한 번만 사용하더라도 고유하게 만드는 것입니다.

이것은 여러 가지 방법으로 달성 할 수 있지만, 각도 앱에서는 lodash uniqueId 함수를 사용하여 변수를 범위에 추가했습니다.

각도 지시문 (JS) :

scope.indicatorColourPatternId = _.uniqueId('IndicatorColourPattern');

HTML 업데이트 :

5 행 : <linearGradient ng-attr-id="{{indicatorColourPatternId}}" x1="0" x2="0" y1="0" y2="1">

11 행 : <rect x="0" y="0" rx="5" ry="5" width="100%" height="100%" ng-attr-fill="url(#{{indicatorColourPatternId}})"/>

이 답변으로 다른 사람이 키보드를 훼손하는 일을 할 수 있기를 바랍니다.

— 제이미 바커
소스
0

리플 로우를 강제로 덜 해킹하고보다 공식적인 방법을 권장합니다 : forceDOMReflowJS 사용 하십시오 . 귀하의 경우 코드는 다음과 같습니다.

sel = document.getElementById('my_id');
forceReflowJS( sel );
return false;
— 잭 지핀
소스
0

요소에 내용 스타일을 추가하면 다시 페인트해야한다는 것을 알았습니다. 다시 그려야 할 때마다 다른 값이어야하며 의사 요소에있을 필요가 없습니다.

.selector {
    content: '1'
}
— 스티브
소스
0

나는 모호한 대답을 시도했지만 그것은 효과가 없다. 다른 브라우저와 비교할 때 Safari와 동일한 clientWidth를 사용하는 데 문제가 있었고이 코드는 문제를 해결했습니다.

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})

내가 get_safe_value 후 clientWidth를 얻기 위해 다시 시도하면, 나는 사파리와 나쁜 값을 얻을 수 있기 때문에 정말 이상하다, 게터 사이이어야 sty.transform = "translateZ(1px)"; 하고sty.transform = "";

결정적으로 작동하는 다른 솔루션은

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

문제는 포커스와 스크롤 상태를 잃는다는 것입니다.

— 보 매트
소스
0

깜빡임, 기존 요소 땜질 및 레이아웃 문제를 피하면서 다시 그리기를 강제합니다.

function forceRepaint() {
    requestAnimationFrame(()=>{
      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(()=>e.remove());  
    });
}
— 사용자 2026189
소스
-1

jquery를 사용한 간단한 솔루션 :

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

또는 

element.innerHTML = element.innerHTML;

html에 추가되었을 때 표시되지 않은 SVG가있었습니다.

svg 요소가 화면에 표시된 후에 추가 할 수 있습니다.

더 나은 해결책은 다음을 사용하는 것입니다.

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

그리고 jQuery와 함께 :

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

Chrome에서 올바르게 렌더링됩니다.

— 야론 샤미르
소스
이 방법의 문제점은 오브젝트 또는 그 하위 항목에 등록한 이벤트 핸들러를 느슨하게하는 것입니다.
— Haqa
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.