Wierd scrolling effect on Ipads

[newbienomad]

This one has my theme support team stumped.

The effect can only be reproduced on ipad (i haven’t tried other tablets, perhaps there too). It can’t be reproduced on device simulators (like google chrome dev tools) or resizing browser windows.

The scrolling effect can be seen on my front page (http://newbienomad.com)

If you scroll down the list of blog posts, you will notice it.

Relevant CSS- If I disable the code, the problem goes away… http://codepen.io/anon/pen/xGVKoK

[Paulie_D]

My spidey-sense tingles when I see that many !important statements.

I know that position:inherit is a thing but I’m struggling to figure out what it does.

https://developer.mozilla.org/en-US/docs/Web/CSS/position

[newbienomad]

im not certain myself, that’s the code I got from my theme support..

[Shikkediel]

My guess would be it’s the smoothscroll script not matching well with iOS momentum scrolling. Maybe have a look at this :

Blog link

Have to add that I can’t actually check the behaviour myself…

[newbienomad]

if it helps, it appears that its this part of the code that causes it:

.et_customized_blog_module.et_pb_blog_grid .et_pb_post {
position: inherit !important;
width: 100% !important;
left:auto !important;
top:auto !important;
padding-bottom: 0 !important;
box-sizing: border-box !important;
}

if i disable each piece on its own, i get the same wierd effect except when i disable this one.

[Shikkediel]

Okay, I guess I shot and missed there. General description sounded momentum scrolling related…

[Author]

Posts