diff --git a/bzGraflow.js b/bzGraflow.js index 8f61618..999da3a 100644 --- a/bzGraflow.js +++ b/bzGraflow.js @@ -253,8 +253,10 @@ class BZgraflow extends Buildoz{ // Initial transform so the full-size child "fits" inside the node const sx0 = nodeBB.width / parentBB.width const sy0 = nodeBB.height / parentBB.height - const tx0 = nodeBB.left - parentBB.left - const ty0 = nodeBB.top - parentBB.top + // When the host graflow is scrollable, nodeBB is viewport-relative while the invading child + // is positioned inside `this` (absolute/inset=0). Add scroll offsets to keep coordinates consistent. + const tx0 = (nodeBB.left - parentBB.left) + (this.scrollLeft || 0) + const ty0 = (nodeBB.top - parentBB.top) + (this.scrollTop || 0) // Inline "scaler" (shadow styles don't apply to the child element) childEl.style.transformOrigin = 'top left' @@ -294,12 +296,12 @@ class BZgraflow extends Buildoz{ } invade(oldEl, newEl){ - const r = oldEl.getBoundingClientRect() - newEl.style.position = 'fixed' //TODO This is bad: not scroll-proof !! - newEl.style.left = r.left + 'px' - newEl.style.top = r.top + 'px' - newEl.style.width = r.width + 'px' - newEl.style.height = r.height + 'px' + // Scroll-proof overlay: position inside oldEl so it follows oldEl scrolling. + // Ensure oldEl is a positioning context. + const pos = getComputedStyle(oldEl).position + if(pos === 'static') oldEl.style.position = 'relative' + newEl.style.position = 'absolute' + newEl.style.inset = '0' newEl.style.display = 'block' oldEl.appendChild(newEl) } @@ -322,8 +324,8 @@ class BZgraflow extends Buildoz{ const parentBB = this.getBoundingClientRect() const sx0 = nodeBB.width / parentBB.width const sy0 = nodeBB.height / parentBB.height - const tx0 = nodeBB.left - parentBB.left - const ty0 = nodeBB.top - parentBB.top + const tx0 = (nodeBB.left - parentBB.left) + (this.scrollLeft || 0) + const ty0 = (nodeBB.top - parentBB.top) + (this.scrollTop || 0) // Try to match duration to the child's transform transition (default 1000ms) const transitionStr = childEl.style.transition || ''