Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

documentElement.clientHeight returns full content height #257

Closed
CruelMoney opened this issue Sep 18, 2017 · 9 comments
Closed

documentElement.clientHeight returns full content height #257

CruelMoney opened this issue Sep 18, 2017 · 9 comments
Assignees
@philipwalton
Labels
bug polyfill

Comments

@CruelMoney
Copy link

CruelMoney commented Sep 18, 2017 •
edited
Loading

When using the polyfill my entries always have an intersectionRatio of 1. I've just spend some time debugging it, and after some time I figured the problem is in the following part of _getRootRect():

...
 // Use <html>/<body> instead of window since scroll bars affect size.
    var html = document.documentElement;
    var body = document.body;
    rootRect = {
      top: 0,
      left: 0,
      right: html.clientWidth || body.clientWidth,
      width: html.clientWidth || body.clientWidth,
      bottom: html.clientHeight || body.clientHeight,
      height: html.clientHeight || body.clientHeight
    };
...

It defaults to use document.documentElement.clientHeight which in my case returns the full height of all content, whereas document.body.clientHeight will return the height of the viewport (which I guess is the intention).
Switching to prefer body over documentElement, makes the polyfill work for me. Can anyone ellaborate on why to use documentElement?
@nekuz0r
Copy link

nekuz0r commented Oct 24, 2017

Applying height: 100% on html element seems to make document.documentElement.clientHeight to return correct value.

I didn't test on width but i guess it will works too.

@philipwalton
Copy link
Member

@CruelMoney can you share a link to the site where you're seeing this? In my experience the vast majority of sites will report the <html> element having the same dimensions as the document and <body> will report the full dimensions of all the content.

@CruelMoney
Copy link
Author

@philipwalton My personal website.

Haven't tried to set height: 100% on the html element, as I ended up changing the source code.

@philipwalton
Copy link
Member

Thanks, you're definitely doing some unusual things with layout there :) but I guess it shows that document.documentElement.clientWidth/Height isn't foolproof, so I may go back to using window.innerHeight/Width (which I was originally using, but switched because it didn't include scrollbars).

@philipwalton philipwalton self-assigned this Nov 4, 2017
@Yaffle
Copy link

Yaffle commented Feb 27, 2018

@CruelMoney, you have no doctype declaration and so the "quirks mode". try to add:

<!DOCTYPE html>

@onigoetz
Copy link

Thank you @Yaffle This did the trick on a bug we were tracking down in an example application :)

@nabtron
Copy link

nabtron commented May 20, 2018

@Yaffle you are awesome! Didn't even think about this mistake! How can I donate you?

@bsteephenson bsteephenson mentioned this issue Jul 5, 2020
Closed
@miketaylr
Copy link
Member

I'm going to declare handling quirksmode to be out of scope. Doctypes are cool. :) Let's close here.

@Mouradouchane
Copy link

hi , i faced the same problem just a few hours ago , and i notice when i put

body{
    position : absolute ;
    height : 100% ;
}

then clientHeight will works 🤔

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@philipwalton philipwalton

Labels
bug polyfill
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
8 participants
@miketaylr @Yaffle @onigoetz @philipwalton @nekuz0r @CruelMoney @nabtron @Mouradouchane