prototypejs / prototype

Prototype JavaScript framework
http://prototypejs.org/
Other
3.53k stars 639 forks source link

cloneposition incorrect with scrolled element in 1.7.3 #328

Open hoodie63 opened 7 years ago

hoodie63 commented 7 years ago

Our code worked fine in 1.7.2 - moved to 1.7.3 and our box comes up below the cloned element by the amount that the div is scrolled. Or to the right of the cloned element if scrolled horizontally.

The base element is a td in a table inside several divs. We have a reusable pop-up div that covers the display td to provide a drop-down choice.

Here's the call:

    Element.clonePosition( pup, element, {setWidth:false, setHeight:false,
                      offsetLeft:0, offsetTop:0} );

I went into 1.7.3 and remove the part that accounts for scrolling and it works again:

    if (options.setLeft)
      styles.left = (p[0] - delta[0] + options.offsetLeft) + 'px';
//was:      styles.left = (p[0] + pageXY.x - delta[0] + options.offsetLeft) + 'px';
    if (options.setTop)
      styles.top  = (p[1] - delta[1] + options.offsetTop)  + 'px';
//was:      styles.top  = (p[1] + pageXY.y - delta[1] + options.offsetTop)  + 'px';
rparada commented 3 years ago

I had a similar problem. I upgraded from 1.7 to 1.7.3 and my div that was supposed to display below the text field where the user types displays at the bottom of the page. I fixed it by replacing the private function pageScrollXY() that the clonePosition() logic calls. The pageScrollXY() was changed from this:

    function pageScrollXY() {
      var x = 0, y = 0;
      if (Object.isNumber(window.pageXOffset)) {
        x = window.pageXOffset;
        y = window.pageYOffset;
      } else if (document.body && (document.body.scrollLeft || document.body.scrollTop)) {
        x = document.body.scrollLeft;
        y = document.body.scrollTop;
      } else if (docEl && (docEl.scrollLeft || docEl.scrollTop)) {
        x = docEl.scrollLeft;
        y = docEl.scrollTop;
      }
      return { x: x, y: y };
    }

to this:

    function pageScrollXY() {
      return { x: document.body.scrollLeft, y: document.body.scrollTop };
    }

Now everything works fine. I tested on macOS on Safari, Microsoft Edge, Firefox, Chrome and Safari Technology Preview.

kiatng commented 1 year ago

The fix in this commit 560bb59 works for me. This issue can be closed.