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.

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

el.clientWidth and el.clientHeight doesn't take into account on Chrome #33

Open
huugooo opened this issue Nov 1, 2018 · 4 comments
Open

Comments

@huugooo
Copy link

huugooo commented Nov 1, 2018

There is an issue with el.clientWidth and el.clientHeight.
On Chrome 69, theses functions always return 0 (in my case), even if I set style="width:300px;height:300px" on my box.
So the script doesn't know how to get width and heigth.

@indianakernick
Copy link

Could this be related to the fact that this library doesn't seem to work very well on Chrome iOS but works fine for Safari iOS? This is weird because Chrome iOS uses the same rendering engine that Safari iOS is using.

@huugooo
Copy link
Author

huugooo commented Feb 6, 2019

I'm using Chrome on OSX

@indianakernick
Copy link

@huugooo I assumed you were talking about a desktop OS. I just thought that perhaps Chrome iOS and Chrome MacOS might share some code.

@hpwxf
Copy link

hpwxf commented Aug 2, 2019

I have the same problem on (Desktop) MacOS (with Chrome, Safari, and Firefox).
I found a quick fix (works for me), but I don't know if it is a valid answer.
So, I have that naive question:
Replacing:

  function innerWidth(el){
    var style = window.getComputedStyle(el, null);
    return el.clientWidth -
      parseInt(style.getPropertyValue('padding-left'), 10) -
      parseInt(style.getPropertyValue('padding-right'), 10);
  }

by

  function innerWidth(el){
    var style = window.getComputedStyle(el, null);
    var baseWidth = el.clientWidth;
    if (baseWidth === 0)
        baseWidth = parseInt(style.getPropertyValue('width'), 10);
    return baseWidth -
      parseInt(style.getPropertyValue('padding-left'), 10) -
      parseInt(style.getPropertyValue('padding-right'), 10);
  }

is it correct ? (I didn't/can't test on other OS or web browser).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants