#339 bug
fr7rer

cumulativeOffset() wrong in FF2 if parents overflow != visible

Reported by fr7rer | September 14th, 2008 @ 11:43 PM | in 1.7

Hi,

My first contribution, so sorry for not installing ruby etc for checking/writing this code.

In Firefox 2 (and probably all versions below 2) position of an element is wrong because ignores the parent's border-width if the overflow of the parent is not overflow == 'visible'.

You can test it with this html code:


  <body style="margin: 0">
    <div style="overflow: hidden; border: 50px solid green; height: 300px;">
      <div style="overflow: hidden; border: 50px solid blue; height: 300px;">
        <div style="overflow: hidden; border: 50px solid red; height: 300px;">
          <p style="margin: 0; padding: 0" id="x">test</p>
        </div>
      </div>
    </div>
  </body>

Position of $('x') should be top: 150, left: 150, but it is reported as top: 0, left: 0.

I wrote a workaround for me, but I would be very happy to hear about faster improvements:


      // overwrite cumulativeOffset() if Firefox2 or below
      if (Prototype.Browser.Gecko && navigator.userAgent.match(/Firefox.[012]/)) {
        Element.addMethods({
          cumulativeOffset: function(element) {
            var valueT = valueL = 0;
            // add border-width of all ancestors, because
            // ff0,1,2 ignore it when overflow != 'visible'
            element.ancestors().each(function(ancestor) {
              var overflow = ancestor.getStyle('overflow');
              if (!overflow || overflow != 'visible') {
                valueT += parseInt(ancestor.getStyle('border-top-width')) || 0;
                valueL += parseInt(ancestor.getStyle('border-left-width')) || 0;
              }
            })
            do {
              valueT += element.offsetTop  || 0;
              valueL += element.offsetLeft || 0;
            } while (element = element.offsetParent);
            return Element._returnOffset(Number(valueL), Number(valueT));
          }
        });
      }

Best regards

Comments and changes to this ticket

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

Attachments

Pages