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

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

Closed
rorykoehler opened this Issue Apr 16, 2015 · 8 comments

Comments

Projects
None yet
6 participants
@rorykoehler

rorykoehler commented Apr 16, 2015

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

This comment has been minimized.

Show comment
Hide comment
@mr21

mr21 Apr 20, 2015

Contributor

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.

Contributor

mr21 commented Apr 20, 2015

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

This comment has been minimized.

Show comment
Hide comment
@rorykoehler

rorykoehler Apr 20, 2015

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

rorykoehler commented Apr 20, 2015

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

@mgol

This comment has been minimized.

Show comment
Hide comment
@mgol

mgol Apr 20, 2015

Member

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

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

Member

mgol commented Apr 20, 2015

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

This comment has been minimized.

Show comment
Hide comment
@rorykoehler

rorykoehler Apr 20, 2015

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.

rorykoehler commented Apr 20, 2015

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

This comment has been minimized.

Show comment
Hide comment
@mgol

mgol Apr 20, 2015

Member

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.

Member

mgol commented Apr 20, 2015

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

This comment has been minimized.

Show comment
Hide comment
@sonus21

sonus21 Oct 29, 2015

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

sonus21 commented Oct 29, 2015

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

@texelate

This comment has been minimized.

Show comment
Hide comment
@texelate

texelate Nov 5, 2015

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

texelate commented Nov 5, 2015

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

@ZombieProtectionAgency

This comment has been minimized.

Show comment
Hide comment
@ZombieProtectionAgency

ZombieProtectionAgency Jan 25, 2017

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

ZombieProtectionAgency commented Jan 25, 2017

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

@lock lock bot locked as resolved and limited conversation to collaborators Jun 18, 2018

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