#339 bug

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

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


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>

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]/)) {
          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