Debugging scroll anchoring when a prepended feed shifts

Chris Rodriguez — Sat, 03 Oct 2026 06:55:04 +0000

If a feed prepends new rows while someone is reading older ones, inspect the scroll container before adding JavaScript to adjust its offset. Chromium may already be compensating for the inserted height through scroll anchoring. A transform on the relevant path can suppress that compensation, producing a jump even though the prepend code did not change.

Reproduce the two states

Save this as scroll-anchor.html and open it in Chromium. Click Prepend after the list settles. Then open the same file with ?suppressed=1 and repeat. The two runs differ only in the transform applied immediately before the insertion.

<button id="prepend">Prepend</button>
<div id="viewport" class="viewport"><ol id="feed"></ol></div>
<style>
  .viewport { height: 300px; overflow: auto; }
  .viewport.transform-shift { transform: translateY(0); }
  #feed li { min-height: 72px; }
</style>
<script>
  const viewport = document.querySelector('#viewport');
  const feed = document.querySelector('#feed');
  for (let index = 0; index < 30; index++) {
    const row = document.createElement('li');
    row.textContent = `Message ${index + 1}`;
    feed.append(row);
  }
  feed.children[16].scrollIntoView({ block: 'center' });

  document.querySelector('#prepend').addEventListener('click', () => {
    const before = viewport.scrollTop;
    if (location.search.includes('suppressed=1')) {
      viewport.classList.add('transform-shift');
    }
    const row = document.createElement('li');
    row.textContent = 'New message';
    feed.prepend(row);
    requestAnimationFrame(() => {
      console.log({ before, after: viewport.scrollTop });
    });
  });
</script>

With anchoring enabled, the browser should increase scrollTop to keep the same message near its prior viewport position. With the transform applied, the controlled Chromium fixture used for the original article leaves the offset unchanged, so visible content moves. Compare both the measured offset and the message in view; a single number alone can hide what the reader experienced.

Decide whether to keep anchoring

If the feed should preserve the current reading position, investigate transforms on the scroller and its ancestors before adding manual scroll correction. If movement is intentional, overflow-anchor: none is the explicit CSS opt-out. Apply it only to the section where that behavior is wanted, then retest insertion and focus behavior. Avoid disabling anchoring across a whole page to hide a local layout problem.

This example is a small browser fixture, not a recipe for virtualized lists. The recorded independent test ran in Chromium on Linux; it does not establish identical results in other browsers or in a framework's scrolling abstraction. The MDN scroll anchoring overview describes suppression triggers, and the MDN overflow-anchor reference covers the opt-out.

Read the full article and view the tested screenshots

Structured Outputs vs function calling in the OpenAI API

Chris Rodriguez — Tue, 29 Sep 2026 03:53:59 +0000

Structured Outputs and function calling are not interchangeable, even though both can involve schema-like structures.

Structured Outputs are the better fit when the model should answer the user in a predictable schema. That keeps the output contract close to the UI and avoids inventing a tool layer that does no real work.

Function calling is the better fit when the model should ask your app to perform an action or fetch data. In that case, the model is proposing a call and the application still owns execution, authorization, and the next turn.

The article shows a small request-shape helper you can run locally, then uses that fixture to prove the difference without needing a live API call. It also calls out the failure cases: using Structured Outputs for a tool-first workflow hides the app boundary, while using function calling for a plain UI payload adds unnecessary orchestration.

The decision rule is simple: if the model owns the final user-facing shape, use Structured Outputs. If your application owns the next action, use function calling.

Read the full article: https://chriseugenerodriguez.com/blog/when-should-you-use-structured-outputs-instead-of-function-calling-in-the-openai-api

DEV Community: Chris Rodriguez

Debugging scroll anchoring when a prepended feed shifts

Reproduce the two states

Decide whether to keep anchoring

Structured Outputs vs function calling in the OpenAI API