Timeline Widget Causing Website Resize with iOS 9


#1

Hi,

the embedded timeline widget is causing a page jump/shift on page load with iOS 9.

Repro: Visit http://juicebox.net/ on iOS 9. Notice the page jumps on page load. Looks like the widget is setting the viewport of the page? Removing the timeline embed code removes the issue.

Using latest embed code from here: https://twitter.com/settings/widgets/new

thanks,

Felix Turner


#2

I’m able to reproduce the issue on iOS9 and am actively looking into the underlying issue. Thanks for the report.


#3

Any update on this? I am having same problem on http://225032.mrsitecloud.com/ on iPhone and iPad OS9


#4

Is there any progress on this? I am also noticing when using headroom.js to hide and unhide the site menu the witter widget is causing the menu to hide will have to remove twitter widget :frowning: until there is a fix.


#5

So the issue seems related to this: https://forums.developer.apple.com/thread/13510

If you add shrink-to-fit=no to the viewport meta tag, it fixes the problem. Requiring everyone to add that though isn’t ideal so I’ll dig into the issue further and see if a fix can be implemented from our side.


#6

@JakeHarding thanks for getting back so quickly with this workaround :smile:


Embedded timeline on mobile device not resizing
#7

Any updates? This workaround doesn’t work for me. Twitter feed is still extending outside the column on my site which is not a responsive site. If I remove the feed there are no issues.


#8

I’m seeing this as well, but I’m not sure it’s specific to iOS9. I have a test iPad here running 8.1 and it’s showing the same overflow issue. I suspect something with the widget code has changed over the last month, as this is on a site that was built and deployed mid september, and testing post-launch did not find this issue.

Has anyone else seen their twitter widgets exceeding their boundaries outside iOS9?


#9

Hi I’m also having the same problem its actually making my site completely unusable on ipad http://www.microbiologyresearch.org/. I am now resorting to Agent sniffing to disable for ipad users see below hack…

  var userAgent = window.navigator.userAgent;
                if (!userAgent.match(/iPad/i)) {
                    !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
                }

#10

Hi the work around did not work.


#11

Please keep us updated. Also experiencing this issue.

Weird thing is I have two embedded timelines and its only occurring with one of them.


#12

Thanks for the workaround. Worked for me.


#13

Hi,

My website www.burgerlad.com shows my Twitter feed fine on Chrome but on my iPad (IOS 9.1) it looks stretched and is making the page look funny.

Is there a solution for this?

Thanks
Simon


#14

Is anyone from Twitter ever going to address this?


#15