X axis scrolling bug


#1

Hey guys,

I’ve run into an issue using the twitter timeline widget relating to scrolling. Basically, I’m working on a digital magazine for Apple and Android devices and I’m implementing this widget. I noticed on the android device in both a webview and the native browser that you are able to scroll on the x axis. This doesn’t appear in chrome for android and on the ipad. At first I thought that this was me being a fool but then I tried logging in to my twitter account (on my desktop using mac/chrome) and testing the widget configurator preview. When you click and drag some text to the right, the widget seems to scroll on the x axis. This doesn’t occur with the widget previews on this page…

https://dev.twitter.com/docs/embedded-timelines

It also doesn’t occur when the widget is set at a full width. I’ve also created a new html page and followed the documentation to create a bare bones, out of the box template (following the documentation) and I’m still getting the same issue. I’m not too worried about the the desktop, but on Android it’s a massive issue as it seems broken. I’m setting both the widget width and container width to 300px and it still happens when removing all styles from the container. I’m embedding the widget using javascript but have also tried swapping to an a tag with no luck.

So, has anyone run into this before? Is it something I’m doing or a bug? Your help would be much appreciated and thanks in advance :slight_smile:

Code…

Twitter Timeline Test
	<style>
		#tweetHolder{
			width:300px;
			
			background-color: #d7edfb;
			padding:30px 10px 30px 10px;
			
		}
		
		#tweetHolder p{
			font-family: sans-serif;
			font-weight:800;
		}
	</style>
	
	<script>
	
		window.onload = function(){
			
			//console.log(twttr);
			//console.log(twttr.widgets.loaded);
			
			
			
			twttr.widgets.createTimeline(

			  'xxxxxxxxxxxxxxx',
			  document.getElementById('tweetHolder'),
			  function (el) {
			    console.log("WIDGET HAS LOADED")
			  },
			  {
			    width: '300',
			    height: '280',
			    chrome: 'noheader nofooter',
			    showReplies: false
			  }
			);
			
		}
		
	</script>

</head>
<body>
	
	<div id='tweetHolder'>
		<p>TEST</p>
		
		<!-- <a class="twitter-timeline" data-chrome="nofooter noheader" href="https://twitter.com/xxxxxxxx" data-widget-id="xxxxxxxxxxxxxxxxxxxxxxxxxxxxx">Tweets by @xxxxxxx</a> -->

	</div>

  
	
	
</body>

#2