0

I use the Simple Utility Function from this Answer to detect if a element is in my viewport. If it is, an fade-in animation is started for my content.

It works fine on Windows, macOS, Android and every browser on iOS except for Safari. In Safari the content stays hidden and the animation only starts after I try to zoom out of my site. I tested this on iOS 10 and 11 Beta 5.

My solution to this problem would be detecting if the user uses Safari on iOS and don't animate my content. But i would like to fix this problem so that the animation works. Can anyone help me with this?

EDIT: I think the issue is caused by Semantic-ui.Tested it with plain html and javascript and it works. I try to fix it now.

p 8
  • 33
  • 1
  • 6

1 Answers1

1

I finnaly found a solution.

The issue was the sidebar from Semantic UI. I found a CSS snipped on the docs. I altered the code a little bit and added it to my css file.

html.ios {
    overflow-x: hidden;
    -webkit-overflow-scrolling: auto !important;
}
html.ios,
html.ios body {
    height: initial !important;
}

Seems like -webkit-overflow-scrolling caused the problem. But i had to add the other lines of code too or else it stutters when i scroll.

Like this, everything works perfectly!

p 8
  • 33
  • 1
  • 6