Hi there, while working on this new site, we noticed some bouncing and shaking while on the site. We first thought it was an issue with the browser/computer, but were able to replicate it on other browsers. We asked Flywheel to look into it and this is what they said.
It looks like that “jumping” effect is coming from some theme CSS.
The theme seems to be using this CSS file for its styling:
** **/wp-content/themes/pro/framework/dist/css/site/stacks/integrity-light.css?ver=2.3.8** **
That file has a line that sets the body
element’s overflow-x
property to hidden
. If I remove that line of CSS (in Chrome dev tools, just for testing), everything seems to work well.
Alternatively, if I change the body
, #x-root
or #x-site
elements’ overflow-y
property value to hidden
, that also solves the issue.
So long story short: it’s some disagreeable CSS that’s causing stuff to scroll when it shouldn’t, and when that stuff should just be hidden from view. I’m sure you’ve noticed there’s a second vertical scrollbar jumping into view when the screen jumps; that’s the cause. Any of the above solutions worked in my personal testing; it’s just a matter of getting the theme to treat overflowing elements properly.
I looked through the custom css and cannot find anything that matches that. Can you look into this and see how we can fix this?