Page Layout Shifts Right on Element Deletion in Chromium Browsers

[BigEyeSmolMouth]

Description

A peculiar layout issue occurs when elements are deleted from the page. The entire page shifts exactly one column to the right, as observed in debug mode. This behaviour is inconsistent and difficult to pinpoint as I don't have enough knowledge of how the recalculation of layout after DOM modifications works with your script:

• It's not clear which specific tag or part of the JavaScript triggers this recalculation.
• The shift can occur when deleting various elements, including <figure>, <details>, or even <p> tags, especially on pages with fewer types of different elements.
• On your homepage, the issue can be consistently reproduced by deleting all elements from top to bottom. The shift typically occurs upon deleting a <figure> element.

This issue appears to be exclusive to Chromium-based browsers. It cannot be reproduced on Safari or Firefox.

Steps to Reproduce

1. Navigate to https://owickstrom.github.io/the-monospace-web/
2. Open the browser's developer tools
3. Begin deleting elements from the DOM, starting with <nav id="TOC" role="doc-toc"></nav>
4. Continue deleting elements sequentially from top to bottom
5. Observe the page layout carefully after each deletion
6. Note when the entire page suddenly shifts one column to the right

Screenshots

Before Element Deletion

After Element Deletion (Note the rightward shift)

Environment

Operating System

• macOS Ventura 13.4.1

Browsers

• Google Chrome 128.0.6613.114
• Arc 1.57.1 (52939) - Chromium Engine Version 128.0.6613.85