#1195 new

Element.clonePosition() behaving incorrectly in 1.7

Reported by periklis | January 10th, 2011 @ 09:54 AM

The following code works correctly with prototype 1.6 but not with 1.7:

<script src = "prototype.js"></script>
<table style = "width:100%;text-align:center">
<img src = "http://api.prototypejs.org/images/header-logo-small.png" onclick = "el=new Element('img', {src:'http://prototypejs.org/images/mephisto-badge-tiny.png'});this.up().insert(el);el.absolutize().clonePosition(this);"/>

In 1.7 the img appears shifted to the top and left. Any clues?

Comments and changes to this ticket

  • periklis

    periklis January 10th, 2011 @ 10:51 AM

    Tested on chromium 8.0.552.224 and firefox 3.6.13

  • Tacid

    Tacid March 17th, 2011 @ 02:22 PM

    same issue: clonned element shifted top and left

  • Tacid

    Tacid March 18th, 2011 @ 03:53 PM

    Ok I've got it! clonePosition set's left and top relative to viewpointParent and if this parent element is body then element will be positioned with Offset viewportOffset - ducument.viewportOffset BUT if BODY is not relativly positioned than it will be SHIFTED! Temporary solution is to make document.body relativly positioned like:

         body: { position: relative; }
  • Tacid

    Tacid March 18th, 2011 @ 05:33 PM

    This problem appears when body Offset is not [0,0]

  • Jason Crowther

    Jason Crowther March 22nd, 2011 @ 04:58 PM

    Seeing the same shifting problem with scriptaculous (1.8.3) Ajax.Autocompleter (results are overlapping the originating text field) in FF 3.6.15, Chrome 10.0.648.151 beta. Oddly enough, looks fine in IE7, IE8.

  • Joe

    Joe June 3rd, 2011 @ 01:22 AM

    I am seeing the same problem as Jason in scriptaculous 1.9.x and prototype 1.7. Autocompleter drop down covers the originating text field.

  • Joe

    Joe June 3rd, 2011 @ 01:58 AM

    I can't edit my previous post but I did find some more info. My autocompleter is in a div that is nested a few divs deep.

    My main container div has a margin-top attribute of 75px. If I add this 75 pixels to the autocomplete class in the chrome debugger then I see the drop down lines up properly. If I remove the top margin then the problem goes away as well.

    Maybe cloneposition isn't taking that into account now for some reason.

    It definitely works on prototype 1.6 with the same markup.

  • Joe

    Joe June 3rd, 2011 @ 02:36 AM

    Sorry to spam the ticket, but I found the difference. I'm not sure if it's intended or how to fix it exactly yet.

    This code in clonePosition is more or less common in 1.6 and 1.7.


        if (Element.getStyle(element, 'position') == 'absolute') {
          parent = Element.getOffsetParent(element);
          delta = Element.viewportOffset(parent);


      if (Element.getStyle(element, 'position') == 'absolute') {
          parent = element.getOffsetParent();
          delta = parent.viewportOffset();

    In 1.6 viewportOffset calls this function

      viewportOffset: function(forElement) {
        var valueT = 0, valueL = 0;
        var element = forElement;
        do {
          valueT += element.offsetTop  || 0;
          valueL += element.offsetLeft || 0;

    In 1.7 though this version of viewportOffset gets called

     if ('getBoundingClientRect' in document.documentElement) {
          viewportOffset: function(element) {
            element = $(element);
            if (isDetached(element)) return new Element.Offset(0, 0);
            var rect = element.getBoundingClientRect(),
             docEl = document.documentElement;
            return new Element.Offset(rect.left - docEl.clientLeft,
             rect.top - docEl.clientTop);

    I'm not familiar enough to know why but in 1.7 there are 2 version s of viewportOffset. In 1.7 the version that gets called is different than 1.6 and that is causing a problem in my case. In 1.7 the delta[1] comes back as 75px (margin-top) in 1.6 the delta comes back as 0px

    Hopefully somebody else has some ideas on how to resolve it?

  • plynchnlm

    plynchnlm June 17th, 2011 @ 08:36 PM

    Here is another test case (without images). The two div's should stack up one on top of each other, but instead the second is shifted up and to the left.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
        <script type="text/javascript" src="javascripts/prototype.js"></script>
        <div id="one" style="border: 1px solid black">Test 1</div>
        <div id="two" style="border: 1px solid black">Test 2</div>
        <script type="text/javascript">
          positionedElement = $('two');
          positionedElement.style.position = 'absolute';
          element = $('one')
          Element.clonePosition(positionedElement, element, {
            setHeight: false,
            setWidth: false,
            offsetTop: element.offsetHeight});
          positionedElement.style.position = 'absolute';

    (Picture attached for Firefox 4.0.1 on Windows XP, using Prototype 1.7.) Tacid's workaround of setting "position: relative" on the body tag fixes this case too.

  • Jason Westbrook

Please Sign in or create a free account to add a new ticket.

With your very own profile, you can contribute to projects, track your activity, watch tickets, receive and update tickets through your email and much more.

New-ticket Create new ticket

Create your profile

Help contribute to this project by taking a few moments to create your personal profile. Create your profile ยป

The Prototype JavaScript library.

Shared Ticket Bins