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

[huugooo]

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]

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]

I'm using Chrome on OSX

[indianakernick]

@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]

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).