Problem with animate(scrollTop) and css overflow-x hidden when body & html are both set to 100% width and height

[rorykoehler]

Spent a few hours trying to get to the bottom of this before I figured out what is going on. I was trying to implement animated scroll with anchor links using animate(scrollTop) and the only thing that happened was the links broke completely. I found it strange as I was using previously functioning script (older version of jQuery) so I guess something broke in a recent update. The console shows no errors. I have tried many different versions of animated scroll so while I'm not 100% certain of my diagnosis I think I am in the right area. My coffeescript is something like this:

  $('a[href^="#"]').on 'click', (e) ->
    e.preventDefault()
    target = @hash
    $target = $(target)
    $('html, body').stop().animate { 'scrollTop': $target.offset().top }, 900, 'swing', ->
      window.location.hash = target
      return
    return

It works fine when the css is either:

html, body {
  overflow-x: hidden;
}

or

html, body {
  height: 100%;
  width: 100%;
}

but not when they are combined like this:

html, body {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
}

This also happened when using 3rd party solutions see here.

[mr21]

JSFiddle here: http://jsfiddle.net/Mr21/L7we5z72/

I like the way, you found a bug and you ask if it's the fault of the plugin you used.
After, you realize it's the fault of jQuery.
But... you have to continue and make an issue on Google Chrome directly :/
Because if you try to put: document.body.scrollTop = 0; it doesn't works neither.
And also because it's work on Firefox.

But this bug occurs only if the html and the body have the overflow-x, so you can just remove the overflow-x for the html and it's okay for you I think.

[rorykoehler]

You're right. I've submited an issue through chrome. Closing issue here. Thanks

[mgol]

You're right. I've submited an issue through chrome.

Could you post a link to the issue here? Some people will be interested...

[rorykoehler]

I wish I could. I submitted through the browser "Help > Report an Issue..." menu and it didn't give me a url for issue tracking. I just checked and it's not on the Chromium bug list (the official build seems to be a separate repo). If and when I hear back I will update this thread.

If you're interested you can have a look at this stackoverflow thread for more infos on google chrome bug tracking.

[mgol]

I wish I could. I submitted through the browser "Help > Report an Issue..." menu and it didn't give me a url for issue tracking.

That's why I generally prefer to submit bug reports manually at https://crbug.com. The built-in reporter is mostly useful to report bugs related purely to the official Chrome build and not Chromium; web-related issues generally concern the whole Chromium code base.

[sonus21]

Thank you I had same problem looking for a hour then found this and solved finally.

[texelate]

It must be a webkit bug as it affects Chrome and Safari.

[ZombieProtectionAgency]

For anybody else curious about this issue I think this is the relevant chromium issue...
https://bugs.chromium.org/p/chromium/issues/detail?id=633573