Each guide opens with a short answer, then follows one original teaching record through definitions, mechanism, worked examples, changed-context checks, misconceptions and bounded reporting.
The examples are stipulated for learning. The standards and specifications define the operational methods; the worked cases keep every input, transformation and limit visible so the reasoning can be repeated.
ResizeObserver reports layout changes during the rendering update. The hard part is identifying whether a callback is simply responding again later or whether the current depth-ordered delivery leaves changed targets skipped.
The central nested-card case traces gather, broadcast, callback writes, layout and the later frame. It keeps error events, callback count and performance cost as separate records.
This specialist guide belongs to the Websites root. It also connects to The Gold Standard of Education | Learning That Transfers into Life and the How X Works hub. The worked cases are original teaching examples; their numbers are stipulated so that the reasoning can be checked.
eduKateSG · Websites
Find your next learning step
Read the short answer first: repeated ResizeObserver callbacks are normal when sizes genuinely change across rendering updates. The standard delivery-loop error is reported when the current update ends with skipped observations that could not be delivered under the depth-order rule.
ROUTE 1 · CHAPTERS 1–4
Define the quantities
Name the quantities, reference conditions and reporting rules.
ROUTE 3 · CHAPTERS 9–12
Audit the evidence
Check instruments, algorithms, assumptions and rival explanations.
ROUTE 5 · CHAPTERS 17–20
Report and continue
Repair shortcuts, answer questions and follow verified routes.
Chapter contents
Define the quantities · Chapters 1–4
1. Name a delivery-loop error and an ordinary repeat
2. Trace active, skipped and inactive observations
Work the mechanism · Chapters 5–8
5. Work the nested-card central case
6. Follow depth through repeated broadcasts
Audit the evidence · Chapters 9–12
Transfer the reasoning · Chapters 13–16
13. Transfer to a responsive chart
14. Transfer to a virtualised list
Report and continue · Chapters 17–20
17. Repair every repeat is an error
18. Repair catch and ignore the error
CHAPTER 1 OF 20 · Define the quantities
1. Name a delivery-loop error and an ordinary repeat
A ResizeObserver callback may run again because a later rendering update produces a genuinely new observed size. A delivery-loop error is narrower: the current rendering update ends with skipped observations that could not be delivered under the depth-order rule. Repetition alone is not evidence of an error.
Write the evidence in the order a reader can audit: the Websites quantity, its reference object, the observation or browser rule, the transformation, and the decision being made. Keeping those fields visible prevents a familiar label from hiding a changed basis.
Create card A at 300 CSS px. Its callback adds content, layout changes it to 340 px, and a later update reports 340. Record two completed deliveries. In a second case, a callback resizes an shallower ancestor after a deeper child has been broadcast; the ancestor becomes skipped in that update.
First-principles test: ask what physical, observational or algorithmic operation produces each value in this chapter. Then ask whether the second value could change while the first stays fixed. If it can, the two labels are not substitutes. For Websites, this counterfactual is often clearer than a definition learned in isolation.
Keep the two recorded sizes but move the second change into requestAnimationFrame. The repeat remains, while the skipped-observation error should disappear if no same-update depth conflict remains.
Evidence check: another reader should be able to reproduce the narrow result from the stored definitions, inputs and intermediate steps, then identify the nearest stronger claim that the evidence does not support.
Browser diagnostics can coalesce or surface errors differently; test a minimal case in the target engines.
CHAPTER 2 OF 20 · Define the quantities
2. Trace active, skipped and inactive observations
The specification gathers active observations at a depth. A target can be inactive because its observed size did not change, active because it changed and is deep enough for this iteration, or skipped because it changed but is not deeper than the current threshold. Those three states explain delivery better than the label infinite loop.
Trace the mechanism before interpreting the result. For Websites, mark which value belongs to the source, which belongs to the measurement or layout algorithm, and which is a reported summary. A calculation is useful only when those roles remain attached.
Observe a shell at depth 4 and a card at depth 7. Broadcast the card first, then let its callback change the shell. The shell is shallower than the new depth threshold, so mark it skipped rather than active for that iteration.
Practical transfer: build two records that share the headline number but differ in the condition discussed here. If the correct interpretation changes, the omitted condition is decision-relevant and belongs in the report. This test turns a vocabulary distinction into a reusable Websites checking habit.
Wrap the card in two extra elements so its depth becomes 9 but leave the shell at 4. The ordering changes only the threshold bookkeeping, not the shell’s size change.
Practical check: keep one counterexample beside the worked case. If the wording fails when that one condition changes, narrow the sentence until it describes only the evidence actually in hand.
Flattened-tree depth and shadow DOM require the specification’s node-depth rule rather than a visual nesting guess.
The standard error message says the ResizeObserver loop completed with undelivered notifications. It does not say every notification was lost forever. Skipped observations are considered again in a later rendering update, so the immediate report describes an incomplete delivery cycle.
Use a compact decision table with columns for condition, input, operation, result and limit. This makes the comparison reproducible and exposes where a missing field would force an assumption instead of an observation.
Log the window error event, callback timestamps and target sizes. At frame 1 the shell is skipped; at frame 2 it is delivered at 360 px. Store both events instead of treating the first message as a crash report.
Misconception check: a plausible output does not prove the right reference, denominator, ancestor, spectrum or observation rule was used. Reconstruct one intermediate step and one changed-context prediction. If either cannot be stated, keep the result provisional rather than strengthening its wording.
Remove the window error listener while keeping the observer. Layout behaviour remains; only the application’s record of the diagnostic changes.
Transfer check: repeat the reasoning with one consequential condition changed while holding the rest fixed. State what changes, what stays comparable and why the original label alone was insufficient.
A missing console message does not prove that no error event occurred or that all engines expose it identically.
CHAPTER 4 OF 20 · Define the quantities
4. Separate callback count from loop failure
A callback count is an application measurement. Loop failure follows the user agent’s active/skipped algorithm. Ten legitimate callbacks across ten frames may be healthy, while two callbacks in one rendering update can still leave a skipped shallower target and report an error.
Preserve the raw inputs beside the derived result. If a later reader changes one condition, the original Websites reasoning should still be recoverable without reverse-engineering a rounded headline or an unlabeled screenshot.
Case H animates width once per frame for 10 frames and logs 10 callbacks without skipped targets. Case E logs two callbacks in one update and one error event. The larger count belongs to the healthy case.
Evidence design: retain both a positive case and a near-miss. The positive case shows when the rule applies; the near-miss changes one consequential condition and shows when the conclusion fails. Together they teach the boundary of the Websites mechanism better than another unlabelled example.
Throttle the animation to five frames. Callback count falls, but the definition of an error does not change.
Audit check: retain the source version, units, settings, exclusions and rounding rule. A future correction should be able to alter one field without rebuilding the entire explanation from memory.
Performance cost still matters even when the loop algorithm completes without an error.
The central example has shell depth 3 at 600 px and card depth 6 at 280 px. The card callback sets shell padding, making shell 632 px. After broadcasting depth 6, the shallower shell change is skipped in that update and the user agent reports undelivered notifications.
Ask what would have to stay fixed for the comparison to be fair. Record those controls explicitly, then name the first uncontrolled condition that could reverse the conclusion. This is the practical transfer step, not an optional footnote.
Build a ledger: initial gather finds card; broadcast threshold becomes 6; callback changes shell; layout recalculates; gather sees changed shell at depth 3; shell goes to skipped; loop ends with an error event; next rendering update can deliver shell 632.
Communication test: replace any sentence that says two things are “the same” or “different” with a sentence naming the operation, reference condition and supported consequence. The extra words are useful when they let a future reader repeat the decision without access to the original author.
Set the padding before observation begins. Shell starts at 632 and no callback-induced shallower change occurs, so the same final geometry need not produce an error.
Decision check: end with an action or interpretation that follows from the stated conditions, followed by a boundary sentence explaining when a specialist rule, local procedure or additional measurement is needed.
The values are an original teaching case, not a claim about a particular framework’s implementation.
After each broadcast, the next gather uses the shallowest depth among the targets just delivered. Only changed targets deeper than that threshold can remain active in the same loop. This shrinking eligible set prevents an unbounded same-frame cycle.
Write the evidence in the order a reader can audit: the Websites quantity, its reference object, the observation or browser rule, the transformation, and the decision being made. Keeping those fields visible prevents a familiar label from hiding a changed basis.
Start with depths 2, 5 and 8. Deliver all active observations, then let callbacks change only targets at depths 6 and 9. Trace which can be active after each new threshold and which become skipped.
First-principles test: ask what physical, observational or algorithmic operation produces each value in this chapter. Then ask whether the second value could change while the first stays fixed. If it can, the two labels are not substitutes. For Websites, this counterfactual is often clearer than a definition learned in isolation.
Move the depth-6 target to depth 4 without changing its size rule. It now crosses from potentially active to skipped after a depth-5 broadcast.
Evidence check: another reader should be able to reproduce the narrow result from the stored definitions, inputs and intermediate steps, then identify the nearest stronger claim that the evidence does not support.
DOM restructuring can alter depth and therefore delivery order even when CSS sizes look unchanged.
CHAPTER 7 OF 20 · Work the mechanism
7. Distinguish size feedback from harmless reads
Reading an observed size in a callback does not itself change layout. Feedback begins when callback work changes styles, attributes, content or descendants in a way that alters an observed box. The causal chain needs a write and a resulting size change.
Trace the mechanism before interpreting the result. For Websites, mark which value belongs to the source, which belongs to the measurement or layout algorithm, and which is a reported summary. A calculation is useful only when those roles remain attached.
Callback A reads borderBoxSize and updates a text log outside the observed subtree; no observed dimension changes. Callback B sets the target width to measured width plus 1 px; every delivery creates a new size.
Practical transfer: build two records that share the headline number but differ in the condition discussed here. If the correct interpretation changes, the omitted condition is decision-relevant and belongs in the report. This test turns a vocabulary distinction into a reusable Websites checking habit.
Move the text log inside the observed card so its wrapping increases height. The formerly harmless reporting write can become feedback.
Practical check: keep one counterexample beside the worked case. If the wording fails when that one condition changes, narrow the sentence until it describes only the evidence actually in hand.
Style engines may defer or batch work; use the observed size record rather than assuming every DOM write forces immediate layout.
Moving a size-changing write into requestAnimationFrame separates it from the current ResizeObserver delivery loop and often prevents skipped observations. It does not guarantee stability: the next frame can still create another size change and another callback.
Use a compact decision table with columns for condition, input, operation, result and limit. This makes the comparison reproducible and exposes where a missing field would force an assumption instead of an observation.
The card callback schedules shell padding for the next animation frame. Frame 1 completes without changing the shell; frame 2 applies padding, lays out, and reports the shell once.
Misconception check: a plausible output does not prove the right reference, denominator, ancestor, spectrum or observation rule was used. Reconstruct one intermediate step and one changed-context prediction. If either cannot be stated, keep the result provisional rather than strengthening its wording.
Schedule width plus 1 px on every frame. The error can disappear while continuous frame-to-frame feedback and poor performance remain.
Transfer check: repeat the reasoning with one consequential condition changed while holding the rest fixed. State what changes, what stays comparable and why the original label alone was insufficient.
Deferral is a scheduling tool, not proof that the component has reached a fixed point.
An idempotent callback writes only when the desired state differs from the current state. This can converge after one correction, whereas unconditional writes can keep invalidating layout even when the logical state has not changed.
Preserve the raw inputs beside the derived result. If a later reader changes one condition, the original Websites reasoning should still be recoverable without reverse-engineering a rounded headline or an unlabeled screenshot.
Measure 497 px, choose the compact class, and add it only if absent. The class produces 480 px; the second callback sees compact already applied and performs no write.
Evidence design: retain both a positive case and a near-miss. The positive case shows when the rule applies; the near-miss changes one consequential condition and shows when the conclusion fails. Together they teach the boundary of the Websites mechanism better than another unlabelled example.
Remove the guard and rewrite the same class attribute every time. Compare mutation and style work even if final size stays 480.
Audit check: retain the source version, units, settings, exclusions and rounding rule. A future correction should be able to alter one field without rebuilding the entire explanation from memory.
Some writes are idempotent at the DOM level but still trigger framework rendering or component effects.
A rule that rounds a fractional CSS size or switches class at a boundary can oscillate between two layouts. The loop diagnosis depends on actual observed sizes and target depths, while the repair may require hysteresis or a stable comparison basis.
Ask what would have to stay fixed for the comparison to be fair. Record those controls explicitly, then name the first uncontrolled condition that could reverse the conclusion. This is the practical transfer step, not an optional footnote.
A card measures 499.6 px, rounds to 500 and chooses wide; wide layout measures 499.4 and chooses compact. Store both unrounded values and the class decision.
Communication test: replace any sentence that says two things are “the same” or “different” with a sentence naming the operation, reference condition and supported consequence. The extra words are useful when they let a future reader repeat the decision without access to the original author.
Use a compact threshold below 498 and a wide threshold above 502. The 499.4–499.6 pair no longer toggles.
Decision check: end with an action or interpretation that follows from the stated conditions, followed by a boundary sentence explaining when a specialist rule, local procedure or additional measurement is needed.
Zoom, font metrics and device-pixel snapping can move a real component across the chosen thresholds.
Several ResizeObserver objects can observe overlapping targets. Each has its own callback, yet document-level delivery processing and layout effects can interact. A log must identify observer, target, box option, callback order and write.
Write the evidence in the order a reader can audit: the Websites quantity, its reference object, the observation or browser rule, the transformation, and the decision being made. Keeping those fields visible prevents a familiar label from hiding a changed basis.
Observer O1 watches card content-box and sets shell padding; O2 watches shell border-box and updates a badge inside card. Trace O1 and O2 separately through the same rendering update.
First-principles test: ask what physical, observational or algorithmic operation produces each value in this chapter. Then ask whether the second value could change while the first stays fixed. If it can, the two labels are not substitutes. For Websites, this counterfactual is often clearer than a definition learned in isolation.
Disconnect O2 while keeping O1. If the loop error disappears, the badge write was part of the feedback path, not proof that O1’s measurement was wrong.
Evidence check: another reader should be able to reproduce the narrow result from the stored definitions, inputs and intermediate steps, then identify the nearest stronger claim that the evidence does not support.
Callback creation order and implementation details should be verified rather than inferred from console line order alone.
A framework component may create observers on mount, rerender from callback state, and accidentally leave old observers attached. Duplicate callbacks across frames can come from lifecycle leakage rather than the specification’s skipped-observation condition.
Trace the mechanism before interpreting the result. For Websites, mark which value belongs to the source, which belongs to the measurement or layout algorithm, and which is a reported summary. A calculation is useful only when those roles remain attached.
Mount, unmount and remount a teaching widget. Count live observer instances and observed targets. Two callbacks for one change with no error event point to duplicate subscriptions.
Practical transfer: build two records that share the headline number but differ in the condition discussed here. If the correct interpretation changes, the omitted condition is decision-relevant and belongs in the report. This test turns a vocabulary distinction into a reusable Websites checking habit.
Call disconnect during cleanup and repeat the mount cycle. Callback multiplicity should return to one.
Practical check: keep one counterexample beside the worked case. If the wording fails when that one condition changes, narrow the sentence until it describes only the evidence actually in hand.
Framework development modes may intentionally repeat lifecycle work; consult the current framework documentation.
A chart often needs the latest container size but should not make the container depend directly on its rendered canvas dimensions. Separate the observed wrapper from the drawing surface and cap internal work to the reported size.
Use a compact decision table with columns for condition, input, operation, result and limit. This makes the comparison reproducible and exposes where a missing field would force an assumption instead of an observation.
Observe a fixed-layout wrapper at 720×400 and resize the canvas backing store without changing wrapper CSS. The draw can repeat when the wrapper changes without creating geometric feedback.
Misconception check: a plausible output does not prove the right reference, denominator, ancestor, spectrum or observation rule was used. Reconstruct one intermediate step and one changed-context prediction. If either cannot be stated, keep the result provisional rather than strengthening its wording.
Set canvas CSS width from its bitmap width and include a scrollbar. Predict how the drawing write can now change the wrapper.
Transfer check: repeat the reasoning with one consequential condition changed while holding the rest fixed. State what changes, what stays comparable and why the original label alone was insufficient.
Canvas device-pixel sizing and accessible alternatives need their own checks beyond loop delivery.
A virtualised list may measure rows, change rendered items and alter container height. Stable designs define which size drives item selection and avoid feeding a transient descendant measurement into a shallower viewport in the same update.
Preserve the raw inputs beside the derived result. If a later reader changes one condition, the original Websites reasoning should still be recoverable without reverse-engineering a rounded headline or an unlabeled screenshot.
A 600 px viewport renders 12 rows. Measuring one row changes its estimate from 48 to 50 px; update the item model without changing viewport height.
Evidence design: retain both a positive case and a near-miss. The positive case shows when the rule applies; the near-miss changes one consequential condition and shows when the conclusion fails. Together they teach the boundary of the Websites mechanism better than another unlabelled example.
Let the rendered item count set the viewport’s auto height. Trace the new ancestor feedback path.
Audit check: retain the source version, units, settings, exclusions and rounding rule. A future correction should be able to alter one field without rebuilding the entire explanation from memory.
Real virtualisation libraries use additional scheduling and estimation rules that must be inspected in context.
CHAPTER 15 OF 20 · Transfer the reasoning
15. Transfer to custom elements and shadow trees
ResizeObserver depth follows the flattened tree, so slots and shadow roots can make visual and DOM-parent intuitions unreliable. Record host, slot, observed target and flattened ancestry when explaining ordering.
Ask what would have to stay fixed for the comparison to be fair. Record those controls explicitly, then name the first uncontrolled condition that could reverse the conclusion. This is the practical transfer step, not an optional footnote.
Observe a custom-element host and a slotted card. The card callback changes host padding. Use the flattened path to calculate the relevant depths before predicting skipped observations.
Communication test: replace any sentence that says two things are “the same” or “different” with a sentence naming the operation, reference condition and supported consequence. The extra words are useful when they let a future reader repeat the decision without access to the original author.
Move the card from a slot into the shadow root and repeat without changing its CSS dimensions.
Decision check: end with an action or interpretation that follows from the stated conditions, followed by a boundary sentence explaining when a specialist rule, local procedure or additional measurement is needed.
Closed shadow roots limit application inspection; component authors should expose stable contracts rather than require internal probing.
A later font or image load can legitimately resize content and trigger another callback after the earlier delivery completed. The elapsed task and resource event distinguish this repeat from a same-update skipped observation.
Write the evidence in the order a reader can audit: the Websites quantity, its reference object, the observation or browser rule, the transformation, and the decision being made. Keeping those fields visible prevents a familiar label from hiding a changed basis.
Initial fallback text makes a card 92 px high. A web font loads 300 ms later and height becomes 104 px. Two callbacks and no loop error are expected.
First-principles test: ask what physical, observational or algorithmic operation produces each value in this chapter. Then ask whether the second value could change while the first stays fixed. If it can, the two labels are not substitutes. For Websites, this counterfactual is often clearer than a definition learned in isolation.
Inline a size-adjusted fallback font so the second height is 94 px. The repeat may remain while its magnitude falls.
Evidence check: another reader should be able to reproduce the narrow result from the stored definitions, inputs and intermediate steps, then identify the nearest stronger claim that the evidence does not support.
Network timing and cached resources make reproduction variable; preserve resource state in the test record.
The repair is to classify by event boundary, size change and skipped-observation evidence. A later callback with a new resource, animation frame or user resize is ordinary observation unless the delivery algorithm reports unfinished work.
Trace the mechanism before interpreting the result. For Websites, mark which value belongs to the source, which belongs to the measurement or layout algorithm, and which is a reported summary. A calculation is useful only when those roles remain attached.
Rewrite ‘the observer looped twice’ as ‘two deliveries occurred 16 ms apart after an animation-frame width change; no loop error event was recorded.’
Practical transfer: build two records that share the headline number but differ in the condition discussed here. If the correct interpretation changes, the omitted condition is decision-relevant and belongs in the report. This test turns a vocabulary distinction into a reusable Websites checking habit.
Move both size changes into one callback-driven update and compare the new diagnostic.
Practical check: keep one counterexample beside the worked case. If the wording fails when that one condition changes, narrow the sentence until it describes only the evidence actually in hand.
Absence of the standard error does not certify good performance or good component architecture.
Suppressing a console report removes evidence without removing the feedback path. A repair should identify the write that changes an observed box, move it to a stable boundary, make it idempotent or redesign the dependency.
Use a compact decision table with columns for condition, input, operation, result and limit. This makes the comparison reproducible and exposes where a missing field would force an assumption instead of an observation.
A global error listener filters the standard message. Keep a parallel size and write trace; the shell still changes one frame late and layout work remains.
Misconception check: a plausible output does not prove the right reference, denominator, ancestor, spectrum or observation rule was used. Reconstruct one intermediate step and one changed-context prediction. If either cannot be stated, keep the result provisional rather than strengthening its wording.
Remove the filter and make the padding rule idempotent. Compare both behaviour and diagnostic.
Transfer check: repeat the reasoning with one consequential condition changed while holding the rest fixed. State what changes, what stays comparable and why the original label alone was insufficient.
An application may choose bounded telemetry sampling, but it should not mislabel an unresolved path as fixed.
A useful receipt stores browser version, observer identity, target, observed box, flattened depth, old and new sizes, callback time, writes, layout result, active/skipped state, error event and next delivery. This lets another reader reconstruct the loop.
Preserve the raw inputs beside the derived result. If a later reader changes one condition, the original Websites reasoning should still be recoverable without reverse-engineering a rounded headline or an unlabeled screenshot.
Package the 300→340 card and 600→632 shell case with a row for every gather and broadcast. Highlight the first point where a shallower changed target becomes skipped.
Evidence design: retain both a positive case and a near-miss. The positive case shows when the rule applies; the near-miss changes one consequential condition and shows when the conclusion fails. Together they teach the boundary of the Websites mechanism better than another unlabelled example.
Delete target depth from the receipt and show why the same sizes no longer explain the delivery outcome.
Audit check: retain the source version, units, settings, exclusions and rounding rule. A future correction should be able to alter one field without rebuilding the entire explanation from memory.
DevTools traces are implementation evidence; keep the normative specification link beside them.
A defensible report says whether the standard undelivered-notification event occurred, which targets were skipped, what callback write caused the size dependency, and whether the repair converged across later frames. It does not call every repeated callback an infinite loop.
Ask what would have to stay fixed for the comparison to be fair. Record those controls explicitly, then name the first uncontrolled condition that could reverse the conclusion. This is the practical transfer step, not an optional footnote.
Write: ‘The card callback changed a shallower shell after depth 6 was broadcast, leaving the shell skipped in that update. Moving the guarded shell write to the next frame produced one later delivery and no further feedback.’
Communication test: replace any sentence that says two things are “the same” or “different” with a sentence naming the operation, reference condition and supported consequence. The extra words are useful when they let a future reader repeat the decision without access to the original author.
Change the guarded write to width plus 1 px every frame and narrow the conclusion.
Decision check: end with an action or interpretation that follows from the stated conditions, followed by a boundary sentence explaining when a specialist rule, local procedure or additional measurement is needed.
Cross-browser release behaviour and framework scheduling still require target-environment verification.
Continue through the verified reading route
Content-box and border-box sizes
Content-box and border-box sizes. Use this to choose the observed box and interpret returned sizes.
Scroll anchoring and snap realignment
Scroll anchoring and snap realignment. Use this when layout changes move a scrolling view.
Intrinsic content size and placeholders
Intrinsic content size and placeholders. Use this when skipped rendering substitutes placeholder size.
Continue through the mechanism boundary
The Gold Standard of Websites | Separating Animation Frame Timestamps from Callback Execution Time. Distinguish deferring a write to animation processing from interpreting its supplied timestamp or measuring callback work.
Frequently asked questions
Does every repeated callback mean an infinite loop?
No. Later size changes can legitimately produce later callbacks without skipped observations or the standard error.
Are skipped notifications lost?
They are not delivered in that loop; changed targets are considered again in a later rendering update.
Does requestAnimationFrame fix the component?
It can separate writes from the current loop, but continuous frame-to-frame feedback can remain.
Authoritative sources and further reading
W3C Resize Observer. Defines active and skipped observations, depth-ordered delivery and the undelivered-notification error.
WHATWG HTML event loops. Defines tasks, microtasks and rendering opportunities around observer delivery.
W3C CSS Box Model. Defines the content and border areas whose changes observers can track.
Return to the Websites subject guide, The Gold Standard of Education, or the How X Works hub.