Feedback
Solved

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

  • 16 November 2021
  • 10 replies
  • 213 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

10 replies

Userlevel 6
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 6
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 6
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 6
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 6
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. :) 

Reply