Welcome to Tesla Motors Club
Discuss Tesla's Model S, Model 3, Model X, Model Y, Cybertruck, Roadster and More.
Register

Mobile - jittery nav + reflow

This site may earn commission on affiliate links.
I couldn't find these mentioned, my apologies if they are duplicates.

On Android Chrome, the bottom nav jitters while scrolling. I haven't checked, but it seems to imply that it's anchored using JavaScript and absolute positioning.

Also, header images and the top ad placeholder don't seem to have their dimensions set, so as each one loads, they push the page contents down. It creates a frustrating experience when the user attempts to touch a link but it moves down the page and they touch a different one instead.

Thanks for reading. I'm happy to help with these if needed.
 
Thanks for the feedback. Can you please mention what phone model you are using?

This is the first time I am hearing about the bottom nav jittering, so I will have to see if I can reproduce it.

I will ask our developer about whether there are some settings that we can apply to the ads to improve the experience. We do offer the ability to upgrade one's account for a (mostly) ad-free experience, but we should still improve the with-ads experience if we can.
 
It's a Moto G Power. The reflow isn't just the ad space, it's the header images too. In fact, they actually load on each page... like there's no cache headers.

To be clear, I haven't lifted a finger to investigate any of this on my computer. Only writing about my experiences on the phone.
 
For the nav, I'm guessing that `position: sticky` is causing this. It's unnecessary in this case, since the nav just sits at the bottom. Switching it to `position: fixed` might resolve this.

In uix_extendedFooter.less, `.uix_hasBottomTabs .uix_tabBar`... `position: fixed` and `width: 100%`. Then to ensure it doesn't cover anything on the bottom of the page, a 54px padding-bottom on the body would help.

Regarding the header images, there's no explicit dimensions set on them, so the browser has to first determine the width based on the layout, then determine the height based on the width. Setting explicit image dimensions should help greatly since the browser can precalculate the image's ratio. So that big header image of 1399x281px should have width=1399 height=281... same for all the others.

One last thing... when I open the "notifications" and touch a link to a recent thread, the page typically loads scrolled to the very bottom (like... the very, very bottom of the page). I then have to scroll up quite a ways to get to the content.

I hope this helps!
 
  • Helpful
Reactions: danny