https://github.com/apendua/semantic-issue-1985

A demo project showing a problem with semantic-ui pushable body element
https://github.com/apendua/semantic-issue-1985

Last synced: 9 days ago
JSON representation

A demo project showing a problem with semantic-ui pushable body element

• Host: GitHub
• URL: https://github.com/apendua/semantic-issue-1985
• Owner: apendua
• Created: 2015-03-19T10:20:52.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2015-03-19T10:47:02.000Z (over 9 years ago)
• Last Synced: 2024-10-19T16:47:52.012Z (20 days ago)
• Language: HTML
• Homepage: http://semantic-issue-1985.meteor.com
• Size: 133 KB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# semantic-issue-1985

A demo project showing a problem with semantic-ui pushable body element.

http://semantic-issue-1985.meteor.com

Look here for more details:

https://github.com/Semantic-Org/Semantic-UI/issues/1985

![zrzut ekranu 2015-03-19 o 11 41 03](https://cloud.githubusercontent.com/assets/1971195/6728794/df4f0f18-ce2c-11e4-8fcc-3b965edf735a.png)

To reproduce open it on an iOS device / emulator and note that the scroll position does not change until you switch off `pushable` class on the `body` element. To make sure it's not related to the possible lack of support for scrolling events, I am just probing the values 10 times per second.

I have observed that

```css

body.pushable {

  overflow-x: initial;

}

```

solves the problem, but of course the content will overflow horizontally producing unwanted scrollbars when the sidebar is active. My suggestion is to use `overflow-x: hidden` only when the scrollbar is active. This should solve all the issues I described above.

Moreover, on a real device there's also a performance issue caused by the same thing. It manifests itself on fixed positioned elements. Namely, when `overflow-x` is `hidden` on `body`, the elements fail to update their position smoothly when the user scrolls the view. They would only update after the scrolling is done, which produces a really ugly visual artifacts. This is also visible on your very own page here

http://learnsemantic.com/guide/expert.html

Looks how the top menu is reacting to scroll events on a mobile device.