{"id":13565475,"url":"https://github.com/anonyco/Force-DOM-reflow-JS","last_synced_at":"2025-04-03T22:31:33.427Z","repository":{"id":66108209,"uuid":"126849926","full_name":"anonyco/Force-DOM-reflow-JS","owner":"anonyco","description":"The cross-browser force DOM reflow library that will work in all current browsers and all future browsers.","archived":false,"fork":false,"pushed_at":"2020-04-19T18:48:01.000Z","size":19,"stargazers_count":8,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-20T22:28:44.951Z","etag":null,"topics":["1kb","browser","css-transitions","dom-reflow","javascript","js","reflow","vanilla-javascript","vanilla-js"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"cc0-1.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/anonyco.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2018-03-26T15:29:13.000Z","updated_at":"2024-02-29T07:16:09.000Z","dependencies_parsed_at":"2023-02-23T19:46:28.878Z","dependency_job_id":null,"html_url":"https://github.com/anonyco/Force-DOM-reflow-JS","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anonyco%2FForce-DOM-reflow-JS","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anonyco%2FForce-DOM-reflow-JS/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anonyco%2FForce-DOM-reflow-JS/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anonyco%2FForce-DOM-reflow-JS/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/anonyco","download_url":"https://codeload.github.com/anonyco/Force-DOM-reflow-JS/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247090248,"owners_count":20881939,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["1kb","browser","css-transitions","dom-reflow","javascript","js","reflow","vanilla-javascript","vanilla-js"],"created_at":"2024-08-01T13:01:47.738Z","updated_at":"2025-04-03T22:31:32.347Z","avatar_url":"https://github.com/anonyco.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Force-DOM-reflow-JS\n### Overview and Install\n\nHave 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.\n\n```Javascript\ntry{var forceReflowJS=(forceReflowJS=function(a){\"use strict\";void a.offsetHeight}).call.bind(Object.getOwnPropertyDescriptor(HTMLElement.prototype,\"offsetHeight\").get)}catch(e){}//anonyco\n```\n()\n\nThen, the code above create a `forceReflow` function that gets passed an Element and reflows the element. Example usage.\n\n```Javascript\ntry{var forceReflowJS=(forceReflowJS=function(a){\"use strict\";void a.offsetHeight}).call.bind(Object.getOwnPropertyDescriptor(HTMLElement.prototype,\"offsetHeight\").get)}catch(e){}//anonyco\n\nforceReflowJS(document.documentElement); // reflows the whole page\n```\n\n### Compatibility\nThe code is guarenteed to work in all current browsers and in IE 9 and up.\n\n### How It Works\nYou may have seen the following code snippets in production\n\n```Javascript\nvar ele = document.getElementById(\"someRandomId\");\nele.offsetHeight;\n```\n\nOr, some production snippets even go through the trouble of including a `void` to increase browser compatiblity.\n\n```Javascript\nvar ele = document.getElementById(\"someRandomId\");\nvoid ele.offsetHeight;\n```\n\nHowever, 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`.\n\n```Javascript\nvar ele = document.getElementById(\"someRandomId\");\nele[\"offsetHeight\"] /*%\u003c-- VERY IMPORTANT CODE SNIPPET! DO NOT REMOVE! URGENT! THIS IS THE BROWSER SPEAKING TO ITSELF! --\u003e%*/;\n```\n\nPlease 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.\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanonyco%2FForce-DOM-reflow-JS","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fanonyco%2FForce-DOM-reflow-JS","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanonyco%2FForce-DOM-reflow-JS/lists"}