In Safari, if you have a layout container that's absolutely positioned to take up, at a minimum, its whole container (which isn't unheard of in "appey" internet home page thingies) using CSS like this:
.absolutely
const {useCallback, useEffect, useReducer, useRef} = require('react'); | |
let effectCapture = null; | |
exports.useReducerWithEmitEffect = function(reducer, initialArg, init) { | |
let updateCounter = useRef(0); | |
let wrappedReducer = useCallback(function(oldWrappedState, action) { | |
effectCapture = []; | |
try { | |
let newState = reducer(oldWrappedState.state, action.action); |
function rafThrottler(callback) { | |
let rafId = null; | |
const flush = () => { | |
callback(); | |
rafId = null; | |
}; | |
return () => { | |
if (rafId) { | |
return; |
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