Homepage › Community Forums › Aspire Theme Support › Jittery and Jumpy
My site http://embarqmarketing.com displays strangely on Chrome for iOS. It looks fine on Safari for iOS. Scrolling on Chrome for iOS is very jittery and jumpy.
That’s weird, I know about the issue (or similar issue) you’re talking about, but it’s not showing up jittery or jumpy for me when I check your site for some reason. It scrolls pretty smoothly even when I test with Chrome as well as Safari. Just not sure why it’s not happening for me on my device, but it is on yours.
I assume your issue only happens at the very top of the page? If so, then that is something that I’ve notice happens sometimes with this theme and it’s because of the Header and Sticky menu code. For some reason the Browser is conflicting with the Sticky Header code, or the Header Position and it causes a slight jittery/jumpy movement at the very top of the page. It happens very quick and sometimes hard to notice, but if I move the browser very slow then sometimes I can see it.
Either way, I have a plan to adjust the way the Header/Sticky Menu is displayed with this theme, and the new way that I code it should fix and remove that issue.
I can let you know once the next update is ready.
Thanks Wes. I look forward to it.
Any updates?
I’m working on an update that will be released this week (hopefully in the next day or so). I’ll let you know once it’s ready so you can test the demo from your end.
Thanks Wes.
I was just about done with all the updates I added and was getting ready to release the new version until I came across another issue. I’m wondering if this is the same issue you were referring to? When I view the Aspire Demo on an iPhone using the Chrome Browser app, I notice if I scroll slowly, the first background image zooms in, and the entire site becomes jittery/jumpy….but only on the home page.
I haven’t noticed the new version doing that in other browsers, it just seems to happen on Chrome.
The other issue that I was talking about before had to do with the Nav/Sticky menu. I already got that issue fixed, but it seems there’s a bug or something going on with Chrome.
I see there are quite a few other sites out there who have reported this issue with the Chrome Browser App for iPhone as well, but I’ll see if I can find a workaround/solution until they get whatever it is fixed.
Yes, that’s the problem exactly.
Can you take a quick look at the demo link? I’m still doing some tests, but I’m curious to see how it shows up on your end – http://demo.appfinite.net/aspire/
Thanks Wes. Looks perfect. No signs of jitter and jumps. Nice work. Congrats and thank you!
Thanks a ton Wes. I have the Imagery theme also. Will that be fixed too?
What was the issue with the Imagery theme?
Same issue as Aspire.
I haven’t noticed that issue yet but I’ll take a look at it. There’s a few other things I already had planned to adjust in the Imagery theme anyways, so I’ll make sure to include that in when I take a look.
Thanks Wes
The update is now visible on StudioPress. What’s the safest way to update my child theme?
I used FTP for the update and it worked perfectly.
Great! Glad everything is working!
One more thing Wes. I changed from the text header to a header image. The header image resizes on scroll. Can this be changed with some custom css?
I added this css
.title-area {
width: 300px;
}
.front-page .site-header {
padding: 10px 0;
}
.site-container .site-header.light {
padding: 10px 0 0;
}
.header-image .light .site-title > a {
height: 60px;
}
p.site-title {
margin-bottom: 0;
}<!--formatted-->
The .title-area entry works great until you resize the browser window.
You may want to remove this part –
.title-area {
width: 300px;
}
…from your Custom CSS. It causes the Menu to float to the right side of the screen, and it opens up weird in 2 places depending on how the browser is resized. The menu icon and menu itself is supposed to show up under the logo when in mobile view (or when the browser is resized).
If you want to prevent the logo from resizing, all you would need to do is either remove or edit this part of the CSS –
.header-image .light .site-title > a {
height: 56px;
}
If you remove it, then the logo will stay the same. If you keep it, then you’ll need to change 56px
to 76px
since that is the default size.
That’s pretty much all that would need to be done to this theme in order to stop the logo from resizing, but you’ve added other CSS customizations that may have to be adjusted as well. Go ahead and try the above suggestions and will see if there’s anything else preventing it from showing properly.