Card-columns Embed Tweet : Difference Between Chrome and other browsers
First thing first: the Twitter widget.js should be loaded only once! You could also reference it in the <head> of the page. Also, instead of 4.0.0-beta you should use 4.0.0-beta.2 of Bootstrap.
About the issue:
Apparently Twitter renders its widget differently on various browsers. On Firefox and Safari the widget is currently rendered in a standard <iframe>, while on Chrome Twitter decided to use an experimental technology called the Shadow DOM. In fact, according to canIUse.com at the time of writing this technology is supported only by Chrome.
While an <iframe> completely isolates the css styles of the root document and that of the iframe contents, it seems that this is not completely true for shadow documents.
In this case the internal styling of the Twitter widget interferes with the column-count css attribute that gets set with .card-columns on the .card container. Most probably this is a browser bug and causes issues in other projects (e.g. spin.js and jQuery-mobile) as well.
For sure, Twitters purpose here is to protect the styling of the widgets from the css of the rest of the page. So it should not be you to fix the internal styling of the widget. Having said that, the cleanest solution would be to not to use .card-columns as is now.
Two ideas you could do instead:
- As the quickest fix, you could use a simple grid layout made up of
.rowand.col-4s. In case all the Twitter cards have the same height this could work perfectly, but leave you with some gaps if the height of the cards vary. Basically this would be:
<div class="container"> <div class="row"> <div class="col-4"> <div class="card" style="border:none;"> <blockquote class="twitter-tweet" data-lang="fr"><p lang="en" dir="ltr">Recapping some of the 💯 Tweets from the past week.</p>— Twitter (@Twitter) <a href="https://twitter.com/Twitter/status/942094257472409600?ref_src=twsrc%5Etfw">16 décembre 2017</a></blockquote> </div> </div> <div class="col-4"> <div class="card" style="border:none;"> <blockquote class="twitter-tweet" data-lang="fr"><p lang="en" dir="ltr">Recapping some of the 💯 Tweets from the past week.</p>— Twitter (@Twitter) <a href="https://twitter.com/Twitter/status/942094257472409600?ref_src=twsrc%5Etfw">16 décembre 2017</a></blockquote> </div> </div> <div class="col-4"> <div class="card" style="border:none;"> <blockquote class="twitter-tweet" data-lang="fr"><p lang="en" dir="ltr">Recapping some of the 💯 Tweets from the past week.</p>— Twitter (@Twitter) <a href="https://twitter.com/Twitter/status/942094257472409600?ref_src=twsrc%5Etfw">16 décembre 2017</a></blockquote> </div> </div> <div class="col-4"> <div class="card" style="border:none;"> <blockquote class="twitter-tweet" data-lang="fr"><p lang="en" dir="ltr">Recapping some of the 💯 Tweets from the past week.</p>— Twitter (@Twitter) <a href="https://twitter.com/Twitter/status/942094257472409600?ref_src=twsrc%5Etfw">16 décembre 2017</a></blockquote> </div> </div> <div class="col-4"> <div class="card" style="border:none;"> <blockquote class="twitter-tweet" data-lang="fr"><p lang="en" dir="ltr">Recapping some of the 💯 Tweets from the past week.</p>— Twitter (@Twitter) <a href="https://twitter.com/Twitter/status/942094257472409600?ref_src=twsrc%5Etfw">16 décembre 2017</a></blockquote> </div> </div> <div class="col-4"> <div class="card" style="border:none;"> <blockquote class="twitter-tweet" data-lang="fr"><p lang="en" dir="ltr">Recapping some of the 💯 Tweets from the past week.</p>— Twitter (@Twitter) <a href="https://twitter.com/Twitter/status/942094257472409600?ref_src=twsrc%5Etfw">16 décembre 2017</a></blockquote> </div> </div> </div></div><link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/><script src="https://platform.twitter.com/widgets.js"></script>- The next option would be to use
masonry.js, which can do the same thing as.card-columnstries to do, but it does that with javascript.
Alternatively you could have a look at the script below, which I do not recommend to use in production though as it is quite hackish. It seems that currently the widget’s shadowbox is in open mode, thus it is possible to access the contents of the rendered widget and make some alterations to it. So I've come up with the script below to make a quick fix on the internal styles. (Unfortunately I could make the icons of reply and retweet to show up.) Here is the working Codepen sample.
// Wait for `widgets.js` to get loadedwindow.addEventListener('load', function() { // Twitter get initialised twttr.ready(function(twttr) { // A widget item finished rendering twttr.events.bind('rendered', function(event) { // event.target is the <twitterwidget> node var widget = event.target, shadow; // Feature detection, if shadowRoot is in use if (!(shadow = widget.shadowRoot)) { return; } // Fixing some styles shadow.innerHTML += '<style>.Avatar, .Tweet-body {position: relative;}</style>'; }); });});