New issue
Advanced search Search tips

Issue 654260 link

Starred by 1 user
Status: Duplicate
Merged: issue 652626
Owner: ----
Closed: Oct 2016
EstimatedDays: ----
NextAction: ----
OS: Mac
Pri: 2
Type: Bug



Sign in to add a comment

CSSStyleDeclaration return inconsistent value

Reported by lingta...@gmail.com, Oct 9 2016 
UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.11; rv:49.0) Gecko/20100101 Firefox/49.0

Steps to reproduce the problem:
1. Open this page: http://codepen.io/lingtalfi/pen/dpmOPp
2. Open the dev tools console
3. Notice the last log line: 194.625px
4. Open the CSSStyleDeclaration object on the previous log line, and search for width: you will see 144px
5. Measure the button, which is effectively 144px
6. Conclude that you cannot access the 144px value, which is the correct one

What is the expected behavior?
btn1.clientWidth should be 144 (not 195)
btn1.offsetWidth should be 144 (not 195)
The value displayed (rendered?) via CSSStyleDeclaration.width should be accessible via window.getComputedStyle(btn1).width

What went wrong?

Did this work before? N/A 

Does this work in other browsers? N/A

Chrome version: 55  Channel: n/a
OS Version: OS X 10.11
Flash Version: Shockwave Flash 23.0 r0

I've found a workaround: wrap all the code in a setTimeout function with a delay of 100 (a delay of 10 is not sufficient, but that might depend on the complexity of the app?).

Comment 1 by lingta...@gmail.com, Oct 9 2016 

Forgot to mention: it works in firefox49 and edge13 (via virtual box on mac host)

https://github.com/lingtalfi/browsers-behaviours/blob/master/get-bounding-client-rect/bcr-icon.md

However, a weird thing: in firefox49 the codepen (dpmOPp) suffers the same problem. It works fine in local though, so I guess it's just that firefox (and edge13) make their computation faster than other browsers.

But the real problem is that there shouldn't be any delay at all (I mean from my web dev's perspective), if that's possible?

Comment 2 by lingta...@gmail.com, Oct 9 2016 

If it was not possible to fix it, maybe could it be possible to have some kind of Event to listen to when the computations are ready? 

window.addEventListener("computationReady", fn);


That would be better than a dirty setTimeout.
I tried with load, but didn't work.

Comment 3 by sureshkumari@chromium.org, Oct 10 2016

Mergedinto: 652626
Status: Duplicate (was: Unconfirmed)
Seems to be this issue is similar to 652626.
Hence merging this issue with 652626.

Please undup if this is not similar issue.
►

Sign in to add a comment