0

Using the official Twitter widget to embed a feed into a website: on iPad the whole page temporarily shifts to the right with a large grey border appearing on the left when scrolling the Twitter feed (tested in Safari and Chrome) on iPad version 11.4.1. it works fine on desktop. Any ideas?

Basic stripped back HTML code is:

<!DOCTYPE html>
<html lang="EN">
<head>
<meta charset="UTF-8"/>
<title></title>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
</script>
<![endif]-->
<link href="style.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <!-- can use for nivoslider alone -->
</head>
<body>
  <div id="container">
    <main>
      <a class="twitter-timeline" data-width="450" data-height="600" href="https://twitter.com/TwitterDev?ref_src=twsrc%5Etfw">Tweets by TwitterDev</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
    </main>
  </div>
</body>
</html>

& CSS:

    body {                                          
margin: 0;
padding: 0;
color: #333233; 
font-family: Arial, Verdana, sans-serif; 
font-size: 16px;
line-height: 1.6em;
background: #eee; }

html, body {height: 100%;}                          
container {  overflow:hidden; min-height: 100%; position: relative;  }
Fizz Web Design
  • 1
  • 2
  • 1
    do you want it to cover an ipad-sized page ? there's no problem with my computer throwing border and right ? can you picture what you see ? – CanUver May 21 '20 at 09:58

1 Answers1

0

OK, so it seems that latest Twitter widget for embedding into an HTML5 website is not backwards compatible with iPad V.11.4.1 (Safari or Chrome). The official Twitter link causes same issue on same iPad. So guess that's it - no solution!

Fizz Web Design
  • 1
  • 2
  • is this new behaviour? You could try reporting / asking about it on the Twitter for Websites section of https://twittercommunity.com – Andy Piper May 21 '20 at 14:04