Jquery OuterWidth showing wrong width

[dev027]

http://codepen.io/stevewrightuk/pen/rVbLJY

The codepen above has been stripped down to just the problem lines of code.

It is dynamically creating a <button> an appending it to a <div>. Inside the button is an <i> for the font-awsome icon and for the button text.

What I am trying to get is the width of the button.

When I attach the button, the “init” function reports a outerWidth of 113. The inspector window shows a width of 115. The onclick also reports a width of 115.

So why does the init function report it as 2 pixels shorter?

[nkrisc]

Looking at your codepen example, I see it displaying 116 and when I inspect it I see a width of 116.5px

Maybe it’s a browser or partial pixel issue?

[Senff]

For me, it shows 113 at first, then a fraction of a second later it updates its value to 115. When I click on the button, it does say 115 as well.

(using Chrome on Windows 7)

[Shikkediel]

I think it’s about the function firing to quickly initially because it’s missing a doc ready wrapper. After refreshing the page, the pixel width seems correct.

[dev027]

@Shikkediel I took your idea and added a document.ready, but it made no difference.

Further investigation with different browsers on Windows 8 reveals:

IE11: Shows 114 initially and 114 after the onclick.
Opera31: Shows 115 initially and 115 after the onclick.
Safari5.1: Shows 101 initially and 114 after the onclick. Refreshing the page and it shows 114 initially.
Firefox40: Shows 114 initially and 114 after the onclick.
Chrome44: Shows 113 initially and 115 after the onclick. Refreshing the page and it shows 115 initially.

I can understand some browsers reporting 114 and others 115 due to rounding issues. What confuses me is that some report it as one value and then a few seconds later report as a larger value.

[Shikkediel]

Indeed… strange. Opera 28 on Windows 7 shows 113 initially as well by the way.

[Shikkediel]

Not a solution but it’s a clue, on window load the width also displays correctly :

Pen

Edit – about 30ms after doc ready (on my machine), the ‘real’ value gets incorporated. Must have to do with a repaint and some browsers needing the next frame to calculate?

Link

[dev027]

@Shikkediel That makes sense. I’ve a few alternative ideas that will fix my problem so I’ll try the ones that don’t required an immediate outerWidth.

Thanks

[nkrisc]

Forgot to mention my observation was on latest Chrome on OSX.

[Azamat Galiyev]

Look here https://jsfiddle.net/c8reymy8/

[Author]

Posts