Streaming live at 10am (PST)

"Jerky" jump after section link


#1

Live site: http://urakashi.webflow.io

Basically when I jump from a page with a section link (eg http://urakashi.webflow.io/#roof for example ) the browsers jumps nicely to where I want it to be, but then gets a spasm and jumps up 200-300px. The distance of the jump is even worse on mobile.

Screencast that shows the issue: https://youtu.be/eG1s2a4AqqA

What can we do to fix this?


Here is my site Read-Only: https://preview.webflow.com/preview/urakashi?preview=e2b524bc23494dbc10fab881d19a8176


#2

Hi @koskimaa

What browser are you using? I’m not seeing this happen in Chrome on Mac.


#3

Hey @markos84uk !

True, doesn’t happen on Chrome. I’m using Safari on Mac, but it’s the same on Safari mobile and also Firefox.


#4

Update: Seems to happen on Chrome mobile (tested on iPhone) as well however.


#5

Hi @koskimaa

Thanks so much for posting about this.

This is definitely a weird glitch and I’m looking into it more now.

At first glance, it appears the issue is coming from the navbar load interaction but I’m still investigating to see if this is the case.

I’ll post back here with more details as soon as I have more info.

Thanks!


#6

Thanks @Brando !

Feels good to know that you’re looking into it! I’ll await your findings!


#7

Any updates @Brando ? Should I start thinking of axing my navbar load interaction…?


#9

Hi @koskimaa

The team is still checking into this one.

After some more testing I was able to find the root cause of this issue.

It looks like there is an instagram embed on the page that’s the culprit here. I made a quick video showing how I resolved this.

Hope this helps :slight_smile:


#10

@Brando Thank you so much for looking into it and making such an elaborate video!!

Indeed it seems that the instagram embed was the culprit. Your solution seems to work fairly well.

I have to set different min-height for each breakpoint manually (since the width also changes) and I’m guessing we’ll still see a bit of jumping on some devices until I can find a better solution for making it 100% responsive. But it’s a lot better than before. Thanks again and please let me know if you have any other advice for a clean solution across all responsive sizes!

All the best,
John


#11

Hi John,

My pleasure to help! In this case you may consider setting a % based width. You can also play around with setting a % based width in the custom code using inline CSS. :slight_smile:


#12

Okay, I’ll play around with that if the client isn’t satisfied with the result, or when I have some time to spare. Thanks again @Brando !

PS. I’m not too familiar with the concept of inline css. Do you have some kind of crash course or other neat link that I could take a look at?


#13

Ah I should have shared a link there. We don’t have any Webflow content on this because you mostly don’t need to code in Webflow :wink:

Inline CSS refers to injecting styles directly into an HTML element rather than through an external CSS file. In this case you could use inline CSS for the height of your custom div:

You can check out more on inline CSS here. :slight_smile:


#14

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.