Jittery and Jumpy

Tagged: aspire, Chrome, ios, mobile

This topic has 21 replies, 2 voices, and was last updated 6 years, 11 months ago by Wes.

Viewing 22 posts - 1 through 22 (of 22 total)

Author

Posts
April 1, 2017 at 2:32 am #21034
Matt
Customer
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.
April 2, 2017 at 1:02 am #21037
Wes
Moderator
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.
April 3, 2017 at 6:50 pm #21054
Matt
Customer
Thanks Wes. I look forward to it.
April 16, 2017 at 3:56 pm #21139
Matt
Customer
Any updates?
April 18, 2017 at 12:37 pm #21142
Wes
Moderator
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.
April 19, 2017 at 5:09 pm #21150
Matt
Customer
Thanks Wes.
April 24, 2017 at 9:25 pm #21177
Wes
Moderator
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.
April 24, 2017 at 9:44 pm #21178
Matt
Customer
Yes, that’s the problem exactly.
April 25, 2017 at 11:35 am #21180
Wes
Moderator
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/
April 25, 2017 at 12:28 pm #21182
Matt
Customer
Thanks Wes. Looks perfect. No signs of jitter and jumps. Nice work. Congrats and thank you!
April 26, 2017 at 2:45 pm #21196
Wes
Moderator
This reply has been marked as private.
April 26, 2017 at 4:28 pm #21203
Matt
Customer
Thanks a ton Wes. I have the Imagery theme also. Will that be fixed too?
April 26, 2017 at 4:54 pm #21206
Wes
Moderator
What was the issue with the Imagery theme?
April 26, 2017 at 4:55 pm #21207
Matt
Customer
Same issue as Aspire.
April 26, 2017 at 5:07 pm #21210
Wes
Moderator
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.
April 26, 2017 at 5:10 pm #21212
Matt
Customer
Thanks Wes
April 28, 2017 at 4:02 pm #21227
Matt
Customer
The update is now visible on StudioPress. What’s the safest way to update my child theme?
April 28, 2017 at 9:56 pm #21232
Matt
Customer
I used FTP for the update and it worked perfectly.
April 29, 2017 at 5:29 am #21236
Wes
Moderator
Great! Glad everything is working!
April 29, 2017 at 10:46 pm #21241
Matt
Customer
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?
April 29, 2017 at 11:03 pm #21242
Matt
Customer
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;
}
```
The .title-area entry works great until you resize the browser window.
April 30, 2017 at 3:39 pm #21248
Wes
Moderator
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.
Author

Posts

Viewing 22 posts - 1 through 22 (of 22 total)

You must be logged in to reply to this topic.