openkraken / kraken

A web standards-compliant, high-performance rendering engine based on Flutter.
https://openkraken.com
Apache License 2.0
4.92k stars 305 forks source link

position:absoluted 元素获取offsetLeft、offsetTop失败为null #1448

Open pba-cra opened 1 year ago

pba-cra commented 1 year ago

使用的 Kraken 版本 | What version of kraken are you using

main

重现步骤 | Steps To Reproduce

重现代码 | Code example:

       const BODY = document.getElementsByTagName('body')[0];
        function setElementStyle(dom, object) {
            if (object == null) return;
            for (let key in object) {
                if (object.hasOwnProperty(key)) {
                    dom.style[key] = object[key];
                }
            }
        }

        function createElementWithStyle(tag, style, child) {
            const el = document.createElement(tag);
            setElementStyle(el, style);
            if (Array.isArray(child)) {
                child.forEach(c => el.appendChild(c));
            } else if (child) {
                el.appendChild(child);
            }
            return el;
        }

        function createText(content) {
            return document.createTextNode(content);
        }
        let target;
        let div;
        div = createElementWithStyle(
            'div', {
                overflow: 'auto',
                height: '100px',
                width: '200px',
                'background-image': 'linear-gradient(#e66465, #9198e5)',
            },
            [
                (target = createElementWithStyle(
                    'div', {
                        position: 'absolute',
                    },
                    [createText(`Modified text`)]
                )),
                createElementWithStyle('div', {
                    width: '400px',
                    height: '10px',
                }),
            ]
        );
        BODY.appendChild(div);
        div.scrollLeft = 1000;
        console.log(target.offsetLeft);

预期结果 | Expected results:

打印为0

实际结果 | Actual results: 打印为null 同时 assert断言异常

Matrix4 getLayoutTransformTo(RenderObject current, RenderObject ancestor, { bool excludeScrollOffset = false }) {
  final List<RenderObject> renderers = <RenderObject>[];
  for (RenderObject renderer = current; renderer != ancestor; renderer = renderer.parent! as RenderObject) {
    renderers.add(renderer);
    assert(renderer.parent != null); -->报错
  }
  renderers.add(ancestor);

  final Matrix4 transform = Matrix4.identity();
  for (int index = renderers.length - 1; index > 0; index -= 1) {
    RenderObject parentRenderer = renderers[index];
    RenderObject childRenderer = renderers[index - 1];
    // Apply the layout transform for renderBoxModel and fallback to paint transform for other renderObject type.
    if (parentRenderer is RenderBoxModel) {
      parentRenderer.applyLayoutTransform(childRenderer, transform, excludeScrollOffset);
    } else {
      parentRenderer.applyPaintTransform(childRenderer, transform);
    }
  }

  return transform;
}