This project is archived and is in readonly mode.

#912 ✓wontfix
fyrye

Chrome 4/5 invalid getSize from cached CSS stylesheets

Reported by fyrye | May 27th, 2010 @ 12:31 AM

getSize() is reporting invalid x/y of an element when it's width/height is set via css and the page is refreshed or loaded from cache.
The resolution atm is to close the browser and navigate to the page.

the div's width is set to 200 and hieght to 400 via CSS.
When the page loads initially the sizes are reported correctly.
Refresh the page (press F5), and it's getSize width reports the window's size, height changes to 20.

This does not occur with inline styles

http://torntech.com/Examples/getSize/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Examples - getSize</title>
        <script type="text/javascript" src="mootools-1.2.4-core.js"></script>
        <link rel="stylesheet" type="text/css" media="screen" href="getsize.css" />
        <script type="text/javascript">
            addEvent('domready', function(){
                $('somediv').set('html', 'Width: ' + $('somediv').getSize().x);
                var curText = $('somediv').get('html')
                $('somediv').set('html', curText + '<br/>Height: ' + $('somediv').getSize().y);
            })
        </script>
    </head>
    <body>
        <div id="somediv"></div>
    </body>
</html>

Comments and changes to this ticket

  • gonchuki

    gonchuki May 27th, 2010 @ 03:10 PM

    past experience has shown me that Chrome will trigger domready too early and measuring some elements that require CSS parsing will report an incorrect size. A reliable (but dirty) workaround is to call the functions that need DOM measuring with a 50ms delay.
    This is probably more of a Chrome related bug than it is to mootools.

  • fyrye

    fyrye May 27th, 2010 @ 07:18 PM

    hmm haven't noticed that before, but don't come to need to pull css styling very often at domready.

    Thanks for the input, but seems kind of a hack, then again don't imagine much else could be done to fix the issue within mootools.

  • gonchuki

    gonchuki August 31st, 2010 @ 06:54 PM

    • Milestone order changed from “0” to “0”

    Chrome bug which is possibly related: http://code.google.com/p/chromium/issues/detail?id=5388

    Presence of such a bug might explain the incorrectly reported height. This was supposedly fixed for upcoming Chrome 6 so it would be wise to check if this cache-related getSize issue is related to the same bug.

    AFAIK there's no way we can fix this from javascript if Chrome is already reporting incorrect values, and thanks to Chrome's auto-updater we can assume this will be a non-issue very soon (again, assuming it's the same bug).

  • Christoph Pojer

    Christoph Pojer September 3rd, 2010 @ 10:27 AM

    • State changed from “new” to “wontfix”
  • nypher

    nypher January 13th, 2011 @ 05:26 PM

    The problem is on the domready event, the only solution for me has been to change to the load event.

    Any delay 50, 100, 150, 250 was working half the times i reload the page.

Create your profile

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

Shared Ticket Bins

People watching this ticket

Referenced by

Pages