4 Replies - 320 Views - Last Post: 13 October 2017 - 02:50 PM

#1 ge∅  Icon User is offline

  • D.I.C Lover

Reputation: 180
  • View blog
  • Posts: 1,126
  • Joined: 21-November 13

I don't trust offsetHeight/Width

Posted 12 October 2017 - 06:27 AM

Hello folks,

I have this issue on so many projects, I always forget it's there : at random, element.offsetHeight or Width don't output the right value, so the things I change the dimensions or position accordingly appear messed up. It can be a misplaced scrollbar, an element which height is too big, etc.

Generally, resizing the browser (I refresh the calculations on window resize) fixes the problem, so it really looks as so something hasn't updated on time. Using requestAnimationFrame to try to synchronise things didn't help.

It is impossible for me to reproduce the bugs I see. What I end up doing is setting things manually (exist flexbox, inline-block, table-cell and the likes, welcome to complex calc(), SCSS with loops, etc.), and, since my layouts can get fairly complex, it is sometimes not even possible to do.

Do you have a workflow for this kind of thing ? Is getBoundingClientRect more reliable ? I have used it sometimes but since the bugs are so hard to track, I don't even know if it has ever failed me. I got too accustomed to this...

Is This A Good Question/Topic? 0
  • +

Replies To: I don't trust offsetHeight/Width

#2 Martyr2  Icon User is offline

  • Programming Theoretician
  • member icon

Reputation: 5074
  • View blog
  • Posts: 13,697
  • Joined: 18-April 07

Re: I don't trust offsetHeight/Width

Posted 12 October 2017 - 07:34 AM

Can you possibly create a small example that demonstrates the problem on something like codepen.io? It might be some simple thing that you just keep repeating thinking it works one way when it works another. We can't see that little thing until we see it messing up.

One thing people may not even realize is that even a video card with improper drivers can cause web displays to not paint correctly. More and more browsers rely on graphics card to do repainting and such in an effort to speed up displays. It is unlikely in this case, but until we can see the problem natively it is hard to track it down or offer good advice.
Was This Post Helpful? 0
  • +
  • -

#3 ge∅  Icon User is offline

  • D.I.C Lover

Reputation: 180
  • View blog
  • Posts: 1,126
  • Joined: 21-November 13

Re: I don't trust offsetHeight/Width

Posted 12 October 2017 - 09:26 AM

I will try to reproduce the simplest working layout exhibiting this issue, but it is possible that nothing go wrong when you view it, even if you play with it 20 times in a row. That's what makes it so hard to apprehend.
Was This Post Helpful? 0
  • +
  • -

#4 CasiOo  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 1571
  • View blog
  • Posts: 3,529
  • Joined: 05-April 11

Re: I don't trust offsetHeight/Width

Posted 13 October 2017 - 02:32 PM

Sounds like a race condition then. Make sure to use either DOMContentLoaded or load event before doing any offset calculations. Difficult to give any better advice without seeing what you're doing :)
Was This Post Helpful? 0
  • +
  • -

#5 ge∅  Icon User is offline

  • D.I.C Lover

Reputation: 180
  • View blog
  • Posts: 1,126
  • Joined: 21-November 13

Re: I don't trust offsetHeight/Width

Posted 13 October 2017 - 02:50 PM

Hello,

I have difficult deadlines to meet, I'll update this thread when I have more time for investigation.

I have first noticed this issue after page loads actually, which is normal because I was only computing this once. I have tried recomputing the styles when I needed to display a given section of the document to fix this but it didn't reduce the prevalence of the bug. Today I generally keep recomputing things before I decide to give up and do everything by hand, because I makes me feel I have some control over it ;)
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1