Scroll position abnormal

[canvascat]

Describe it simply:

• scroll position abnormal
• the top bar has disappeared

Quick demo to reproduce

only use snapdom(document.documentElement) at https://preview.pro.ant.design/profile/basic/

result:

The specific reproduction steps can be referred to #363

Anything else we should know?

[canvascat]

https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Display/Containing_block

If the position property is fixed, the containing block may also be formed by the edge of the padding box of the nearest ancestor element that has any of the following transform value other than none.

but snapdom used transform: translateY(-100px) to simulate scrolling 100px.

[canvascat]

This plugin should be able to fix the aforementioned issues

import type { CaptureContext, SnapdomPlugin } from '@zumer/snapdom';

const containingBlockPositionFixPlugin = {
  name: 'containing-block-position-fix',
  beforeClone(context: CaptureContext & { __cacheElements__?: Set<HTMLElement> }) {
    const root = context.element;
    if (!(root instanceof HTMLElement)) return;
    const fixedElements = new Set<HTMLElement>();

    function traverseElement(element: HTMLElement, scrollOffset?: { x: number; y: number }) {
      const scrollX = element.scrollLeft;
      const scrollY = element.scrollTop;
      if (scrollX || scrollY) {
        scrollOffset = { x: scrollX, y: scrollY };
      }
      for (const child of Array.from(element.children)) {
        if (!(child instanceof HTMLElement)) continue;
        if (scrollOffset) {
          const cs = getComputedStyle(child);
          if (cs.position === 'absolute' || cs.position === 'fixed') {
            const top = `${Number.parseFloat(cs.top) + scrollOffset.y}px`;
            const left = `${Number.parseFloat(cs.left) + scrollOffset.x}px`;
            child.dataset.willFixPosition = `${top}|${left}`;
            fixedElements.add(child);
          }
        }
        traverseElement(child, scrollOffset);
      }
    }
    traverseElement(root);
    context.__cacheElements__ = fixedElements;
  },
  afterClone(context: CaptureContext & { __cacheElements__?: Set<HTMLElement> }) {
    const root = context.clone;
    if (!(root instanceof HTMLElement)) return;
    function traverseElement(element: HTMLElement) {
      for (const child of Array.from(element.children)) {
        if (!(child instanceof HTMLElement)) continue;
        if (child.dataset.willFixPosition) {
          const [top, left] = child.dataset.willFixPosition.split('|');
          child.style.top = top;
          child.style.left = left;
          delete child.dataset.willFixPosition;
        }
        traverseElement(child);
      }
    }
    traverseElement(root);
    if (context.__cacheElements__) {
      context.__cacheElements__.forEach((element) => {
        delete element.dataset.willFixPosition;
      });
      context.__cacheElements__.clear();
      delete context.__cacheElements__;
    }
  },
} satisfies SnapdomPlugin;

snapdom(document.documentElement, { plugins: [containingBlockPositionFixPlugin] });