[JavaScript] Force-DOM-reflow-JS 

Force-DOM-reflow-JS

 

https://github.com/anonyco/Force-DOM-reflow-JS

 

Overview and Install

Have you ever needed to force a dom reflow during transitions or other purposes? Do you find yourself frustrated with the cross browser solutions being too hackish and not-working-right? Then look no further. Simply insert the following 189-byte line of code into the top of your script to solve all your problems.

try{var forceReflowJS=(forceReflowJS=function(a){"use strict";void a.offsetHeight}).call.bind(Object.getOwnPropertyDescriptor(HTMLElement.prototype,"offsetHeight").get)}catch(e){}//anonyco

()

Then, the code above create a forceReflow function that gets passed an Element and reflows the element. Example usage.

try{var forceReflowJS=(forceReflowJS=function(a){"use strict";void a.offsetHeight}).call.bind(Object.getOwnPropertyDescriptor(HTMLElement.prototype,"offsetHeight").get)}catch(e){}//anonyco

forceReflowJS(document.documentElement); // reflows the whole page

Compatibility

The code is guarenteed to work in all current browsers and in IE 9 and up.

How It Works

You may have seen the following code snippets in production

var ele = document.getElementById("someRandomId");
ele.offsetHeight;

Or, some production snippets even go through the trouble of including a void to increase browser compatiblity.

var ele = document.getElementById("someRandomId");
void ele.offsetHeight;

However, lets face it: theese are hackish solutions that are flimsy and temporary because the browser can easily optimize the above statementes out. However, force-Reflow-JS is different in that it explictily tells the browser not to remove the statement through increasing the complexity of the statement to a degree at which one would not exert without reason and just cause. In English, when the browser sees forceReflowJS, it doesn't just see void ele.offsetHeight, rather it sees much more. Internally, the browser thinks like this when it sees forceReflowJS.

var ele = document.getElementById("someRandomId");
ele["offsetHeight"] /*%<-- VERY IMPORTANT CODE SNIPPET! DO NOT REMOVE! URGENT! THIS IS THE BROWSER SPEAKING TO ITSELF! -->%*/;

Please note that while the alternatives are flimsy, ForceReflowJS unfourtunately has to fall back to void ele.offsetHeight in unsupporting browsers. However, no need to worry too much: these unsupporting browsers likely do not optimize enough to be able to get rid of this flmsy statement.

 

https://github.com/anonyco/Force-DOM-reflow-JS

 

 

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다.
어린이용이며, 설치가 필요없는 브라우저 게임입니다.
https://s1004games.com

// forces a complete reflow of a single element

try {

window.forceReflowJS = Function.prototype.call.bind( // wrap it all up into an auto

Object.getOwnPropertyDescriptor( // obtain the internal funciton that performs the reflow

HTMLElement.prototype,

"offsetHeight"

).get

);

} catch(e) {

window.forceReflowJS = function(a){void a.offsetHeight};

}

 

 

 

본 웹사이트는 광고를 포함하고 있습니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
번호 제목 글쓴이 날짜 조회 수
543 [JavaScript] How to select all tag elements with JS 졸리운_곰 2024.05.18 11105
542 [HTML] DIV를 통해 일반적인 헤더를 만들어 보자. file 졸리운_곰 2024.05.18 369
541 [JavaScript] 자바스크립트 javascript 정규식 replace html 제거 태그 제거 졸리운_곰 2024.05.18 616
540 [HTML] Set display:none not working. : display : none 이 동작하지 않습니다. 졸리운_곰 2024.05.18 499
539 [JavaScript] Checking if iframe contents are loaded? : iframe 로딩 완료 이벤트 확인 졸리운_곰 2024.05.18 533
538 [HTML] How TO - Get Iframe Elements : javascript로 iframe 요소에 접근 졸리운_곰 2024.05.18 486
537 [전자상거래/쇼핑몰 개발] [카페24쇼핑몰] 상품상세 검색 file 졸리운_곰 2024.05.17 611
536 [HTML] form submit redirection 리다이렉션 없이 자기 페이지에 결과 표시 : <form> 태그의 target 속성 졸리운_곰 2024.05.17 485
535 [HTML] form submit redirection 리다이렉션 없이 자기 페이지에 결과 표시 : iframe으로 form 응답값 받기 졸리운_곰 2024.05.17 481
534 [JavaScript] 자바스크립트 DIV 보이기, 숨기기(토글) 졸리운_곰 2024.05.16 501
533 [JavaScript] [JS] XPath로 element 찾기 file 졸리운_곰 2024.05.16 495
532 [JavaScript] How to clone (and restore) a DOM subtree 졸리운_곰 2024.05.16 324
» [JavaScript] Force-DOM-reflow-JS 졸리운_곰 2024.05.16 522
530 [JavaScript] Javascript XPath를 이용해서 Dom Element 가져오기 졸리운_곰 2024.05.15 496
529 [JavaScript] Introduction to using XPath in JavaScript 졸리운_곰 2024.05.15 504
528 [JavaScript] JavaScript :: 요소 가져오기 file 졸리운_곰 2024.05.15 579
527 [웹 어셈블리, WSAM] Persisting data with Emscripten : Emscripten으로 데이터 유지하기 졸리운_곰 2024.04.20 381
526 [웹 어셈블리, WSAM] Porting a Linux Program to Run in Browser using Emscripten : mscripten을 사용하여 브라우저에서 실행되도록 Linux 프로그램 포팅 졸리운_곰 2024.04.20 391
525 [node.js 개발] Apache Reverse Proxy 설정(아파치와 노드 연동) file 졸리운_곰 2024.03.17 300
524 [node.js 개발] PM2로 Node.js 앱 프로세스 배포하기 file 졸리운_곰 2024.03.16 405
대표 김성준 주소 : 경기 용인 분당수지 U타워 등록번호 : 142-07-27414
통신판매업 신고 : 제2012-용인수지-0185호 출판업 신고 : 수지구청 제 123호 개인정보보호최고책임자 : 김성준 sjkim70@stechstar.com
대표전화 : 010-4589-2193 [fax] 02-6280-1294 COPYRIGHT(C) stechstar.com ALL RIGHTS RESERVED