Semantic UI broke down scrollTop()

[riophae]

I tried getting scroll position but it always returns 0.

$(document).scrollTop(); // => 0

I found that it's because Semantic UI had set height: 100%; on html and body.
http://stackoverflow.com/a/12789956/2228929

Why? What does this code do?
Or is there any workarounds without removing the height: 100%;?

[riophae]

Oh, I'm sorry.
I just noticed that it's possible to get scroll position on semantic-ui.com. Everything works fine.
The bug is not due to height: 100%;, at least not entirely.

But in my current project... After removing height: 100%; on html and body the bug disappeared magically. No idea what to do.

[jlukic]

Are you using the latest SUI?

Most likely its from

html {
 overflow-x: hidden;
}

which was in an older version of sidebar.

[riophae]

OMF... It was my own mistake. Say sorry again.
I had used html, body { overflow-x: hidden; } in my code, not in SUI. After removing html, it works fine now.

Thanks a lot!

[riophae]

Oh no, I just forgot why I added html, body { overflow-x: hidden; } It was because I wanted to disable the horizontal scroll on iOS device.

All code to do that is as following:

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

via http://stackoverflow.com/questions/17756649/disable-the-horizontal-scroll

It doesn't break down scrollTop(). But when meets Semantic UI... Everything messes up.

Fortunately, I finally found a solution. I just moved the two lines of code above into body > #wrapper and didn't use any code to override Semantic UI. The horizontal scroll disabled and scrollTop() returns correct value. Completely Perfect!

But I think that... Disabling the horizontal scroll is a MUST on any mobile devices. It should be done by Semantic UI as default. And Semantic UI should not break down scrollTop().

There is an alternative way I found to solve the problem, but I'm not sure if this will introduce any new bugs:

html, body {
  // note: there is no `height: 100%;` !
  min-height: 100%;
  max-height: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

Just replace height: 100%; with min-height: 100%; max-height: 100%; and it also appears to work fine.

[riophae]

I found that the latest Semantic UI detects whether the device is running iOS, and if it's true then apply these code:

@media only screen and (max-width: 992px) {
  html.ios {
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }
}

These code may work fine on any iPhone (except that it needs time to take effect as JavaScript runs a bit slower than CSS).

But on iPad with landscape mode, you can still scroll the page horizontally. Because the media query is limited to max-width: 992px; while iPad is 1024px wide!

[jlukic]

You lose a lot by adding overflow on html: native momentum scrolling, proper scrollTop() values, but its the only way to solve issues with sidebar caused by the canvas attempting to reposition when elements are pushed off-canvas with translate3d.

I haven't noticed the issues with iPad in horizontal layouts. Can probably take out the mediaquery around the ios css rule.

[tamoyal]

I'm a bit confused by this issue because I'm still seeing the overflow-x: hidden; in the html.ios class which was said to be older buggier code. I have verified that the existence of that completely breaks window.scrollTo. Should this issue really be closed?