All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.
Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.
elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
(by @andrestaltz)
If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.
| @-webkit-keyframes bgcolor { 0% { background-color: #ffccf2; } | |
| 50% { background-color: #ccffcc; } | |
| 100% { background-color: #ccffff; } } | |
| @-moz-keyframes bgcolor { 0% { background-color: #ffccf2; } | |
| 50% { background-color: #ccffcc; } | |
| 100% { background-color: #ccffff; } } | |
| @-ms-keyframes bgcolor { 0% { background-color: #ffccf2; } | |
| 50% { background-color: #ccffcc; } |
| @function em($target, $context: $base-font-size) { | |
| @if $target == 0 { @return 0 } | |
| @return $target / $context + 0em; | |
| } | |
| $base-font-size: 15px; | |
| h1 { | |
| font-size: em(21px, 15px); // Outputs 1.4em | |
| } |
| /* modernizr-test.js | |
| * Daniel Ott | |
| * 3 March 2011 | |
| * Custom Tests using Modernizr's addTest API | |
| */ | |
| /* iOS | |
| * There may be times when we need a quick way to reference whether iOS is in play or not. | |
| * While a primative means, will be helpful for that. | |
| */ |