Answered

Google Chrome: Page gets scrolls to embedded typeform's position on load but only form mobile screens

  • 16 November 2021
  • 23 replies
  • 2579 views

On google chrome whenever the iframe is loaded the content of the page gets auto scrolled to the typeform’s position. It is working fine on Safari. Can anyone help?

icon

Best answer by mathio 19 November 2021, 20:26

View original

23 replies

Userlevel 7
Badge +5

Hello @jyoti_prakash 

this is actually one of typeform features to allow visitors of your website easier interaction with your embedded typeform (they don’t need to click into it, it is already focused).

If you want to disable this feature you can use embed option disableAutoFocus (if you are embedding using JavaScript) or data-tf-disable-auto-focus (if you use HTML snippet).

For example like this:

<div 
data-tf-widget="<form-id>"
style="width:600px;height:400px;"
data-tf-disable-auto-focus
/>

 

Hello @jyoti_prakash 

this is actually one of typeform features to allow visitors of your website easier interaction with your embedded typeform (they don’t need to click into it, it is already focused).

If you want to disable this feature you can use embed option disableAutoFocus (if you are embedding using JavaScript) or data-tf-disable-auto-focus (if you use HTML snippet).

For example like this:

<div 
data-tf-widget="<form-id>"
style="width:600px;height:400px;"
data-tf-disable-auto-focus
/>

 

Hi Mathio, I tried both “disableAutoFocus” and “data-tf-disable-auto-focus” but they didn’t work. 

Here’s how I am doing

 

<Widget

medium = {"inline"}

id={formId} style={{ width: '100%', height: `${height}px` }} className="typeform-widget"

disableAutoFocus={true}

/>

Userlevel 7
Badge +5

Do you happen to have an example website where this is happening? I can have a look for you.

Hi @mathio, here is a sample of what I am trying to do

https://codesandbox.io/s/winter-surf-hd3i0

https://hd3i0.csb.app/ (Open this URL and set device type to mobile)

See the below image for reference:

 

 

As soon as the page loads it gets auto scrolled to the bottom of the page where the embedded typeform is positioned. I am trying to fix this auto scroll issue. 

Userlevel 7
Badge +5

Yes, there seems to be a bug. I will check with related teams here in Typeform.

BTW you are modifying your widget URL from the outside of the embed lib. You should not do that. Instead have a look at the README file - there is a inlineOnMobile prop you can use. Unfortunately this does not solve the focus issue but it makes the code nicer and prevents possible issues in future.

Thanks @mathio. Will change it as you suggested.

So do you have any solution for me regarding the issue I mentioned? 

Userlevel 7
Badge +5

For now you could embed without inlineOnMobile to prevent the page scroll.

If you want to embed inline on mobile I am afraid you will need to wait for a fix from us 🙃 We will do our best, however I can not commit to an estimate right now.

I have the same problem. Tried the data-tf-disable-auto-focus as well with no fix. Here’s my link: https://tacostomorrow.s3.us-east-2.amazonaws.com/staging-prontotaco/home-typeform-test.html

Userlevel 7
Badge +5

Hello @jyoti_prakash and @prontotaco , I am happy to let you know that my colleagues have fixed the focus issue. The page no longer scrolls down to your embedded typeform when you use inlineOnMobile.

Thank you so much @mathio. :) 

Userlevel 1
Badge

Hi,

My URLs (pocketaxis.com, theoryfish.digital) both have a Typeform embedded...different ones in each case. On loading the URL, the page then immediately jumps to my Typeform. There’s nothing in the URL bar to indicate the jump. 

I did try and change the custom URL on one of my Typeforms, but I think I changed it back, and in any event, it should not apply to both.

I cannot figure out why this is suddenly happening. Anyone have any suggestions?

Regards,

David

Userlevel 1

I just wanted to make this post as well.

I have a bunch of articles with typeforms on them and now instead of being just an element on them that users eventually scroll to, on load the page goes straight to the typeform.

I think they updated something and this happened.

Userlevel 1
Badge

Hello, it seems this issue started to happen again with the typeform embedded forms. 

Is there any chance to turn the scrolling to the embedded forms off?

Thank you,

Honza

Userlevel 7
Badge +5

Hi @Honza Kysely Could you share the URL where your form is embedded so we can take a look? Thanks!

Userlevel 1
Badge

Hi Liz,
for sure:
https://futurebusiness.cz/sciolink-webinar/
Thanks!

Honza

Userlevel 7
Badge +5

Thanks, @Honza Kysely ! I tested this on Safari on iPhone, but I’m not experiencing the issue. Which browser/device are you seeing this? 

Userlevel 1
Badge

MacBook Air + Dell computers / Google Chrome and Brave browsers - both doing the same. And we have the feedback from our clients as well - here I am not sure what device and browser they are using.

I am experiencing this bug, anyone solved it?
Page: https://sadjevpisarni.si/

Thanks, @Honza Kysely ! I tested this on Safari on iPhone, but I’m not experiencing the issue. Which browser/device are you seeing this? 

I am using Chrome.

Userlevel 1
Badge

Hi,

I’ve had this problem for days now on all my sites with embedded forms. It’s the same on Chrome, Firefox & Brave.

Please take a look and let me know urgently. I have an important conference next week, and this will make me look unprofessional…

pocketaxis.com

David

Userlevel 7
Badge +6

@Dave K - you might want to raise a help ticket with Typeform Support at this link here, in order to get someone to look at your issue(s)

I am also having this issue via a private community on Circle. The ‘embed’ is a no-code integration with Circle, so I can’t add any additional code either.

 

Since it’s private, I can’t just link to the example here, but if someone wants to reach out, I can show someone the tech team. 

 

To be honest, I was this close to purchasing a plan with Typeform and making this my go to form for my community given it’s integration, but the lack of resolve on this issue after a few months and the fact many others are experience it makes me wary, so will probably default to a free option elsewhere. The jump-to feel unprofessional but more so it makes the posts in the community complete unreadable because you cannot scroll up past the integration in a post.  

I have the same problem as NatPW. Our form is embedded in a post in a private community in Circle. Because Circle uses an embedding tool, wherein we just enter in the form URL, I can’t edit the embed code by adding in an additional HTML class the way I would on a WordPress website. They limit embeds in this manner.

It’s annoying to have the page scroll down to a form that is intended to act as the final option when other troubleshooting options have been exhausted.

Reply