- This topic is empty.
August 12, 2015 at 10:30 am #206439
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?August 12, 2015 at 11:34 am #206444nkriscParticipant
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?August 12, 2015 at 12:38 pm #206448SenffParticipant
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)August 12, 2015 at 2:19 pm #206456
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.August 12, 2015 at 2:36 pm #206458
@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.August 12, 2015 at 2:56 pm #206459
Indeed… strange. Opera 28 on Windows 7 shows 113 initially as well by the way.August 12, 2015 at 4:41 pm #206462August 13, 2015 at 1:14 am #206469
@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.
ThanksAugust 13, 2015 at 6:01 am #206478nkriscParticipant
Forgot to mention my observation was on latest Chrome on OSX.June 14, 2016 at 8:02 am #242849