#526 enhancement
Ron Rademaker

Element.getDimensions can change page

Reported by Ron Rademaker | January 19th, 2009 @ 04:26 PM | in 1.7

If the element is hidden (ie. display:none) and wider or higher than the current viewport (or positioned element with certain overflow) the temporary display block that allows getting the element size causes temporary scrollbars. This causes an annoying page shaking effect. This issue can be resolved quite easily by temporary setting the elements position to left -10000px and top -10000px (if the elements gets really big 10000 will not be enough).

Comments and changes to this ticket

  • Juriy Zaytsev

    Juriy Zaytsev January 19th, 2009 @ 06:30 PM

    • Milestone set to 1.7
    • State changed from “new” to “enhancement”

    Not sure if this needs to be in a core.

    First, it's not clear which value to offset an element by (as you mention, element might be bigger than 10000px and, afaik, some browsers have problems understanding values with more than 4 digits). We can, of course, use something relatively large like 9999px, but that's not a perfect solution, is it?

    There's also an additional overhead of saving, setting and then restoring both "position" and "left" properties (Could you explain why "top" needs to be set as well?)

    While I understand how your proposal can be useful, I would rather keep such low-level method as simple as possible : )

    Maybe other core members have different opinion. Marking it as an "enhancement" meanwhile.

  • Nick Stakenburg

    Nick Stakenburg January 19th, 2009 @ 08:08 PM

    Could you explain why "top" needs to be set as well?

    That should prevent pushing in a vertical scrollbar on pages that don't have one.

    Seems like a nice enhancement, too bad there's no way to work around the overhead without causing more overhead, most of the time you wouldn't even need this.

  • Juriy Zaytsev

    Juriy Zaytsev January 20th, 2009 @ 06:51 AM

    Well, I don't see much overhead in introducing either optional argument or some kind of switch - as long as default behavior is as simple/fast as possible (and back-compat of course).

    $('foo').getWidth({ offsetElement: true });
    // or
    $('foo').getWidth({ offsetElement: '1000px' });
    // or switch
    // slower
    // faster (should be default)
    Element.OFFSET_VISIBLE_ELEMENTS = false;
  • Ron Rademaker

    Ron Rademaker January 20th, 2009 @ 09:06 AM

    The switch or optional argument sounds good to me, By the way, when using the offset, you can omit the visibility style setting, reducing the overhead a bit.

  • Nick Stakenburg

    Nick Stakenburg January 20th, 2009 @ 12:17 PM

    Juriy, good idea. It could also be a function to switch between offset and no offset methods to avoid checking for the variable or options on every dimension call.

  • Tobie Langel

    Tobie Langel July 24th, 2009 @ 02:23 AM

    • Tag cleared.

    [not-tagged:"" bulk edit command]

  • T.J. Crowder

    T.J. Crowder November 16th, 2009 @ 04:50 PM

    [responsible:none bulk edit command]

  • Tisho Georgiev

    Tisho Georgiev March 1st, 2010 @ 09:28 PM

    • Tag set to needs:patch, section:dom

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