All geek questions in one place

Card-columns Paste Tweet: Difference Between Chrome and Other Browsers

I use Boostrap 4 card-columns to exchange tweets on my site.

I noticed the difference between Chrome browsers and others. In fact, Chrome has lost some information in the second and third columns. You can see it in captures.

could you help me? Sorry for my English, I'm a young French developer. Thank.

I am using this code:

<!DOCTYPE html>
<html lang="en">
<head>
	 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
</head>
<body>
<div class="container">
	<div class="card-columns">
		<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>&mdash; Twitter (@Twitter) <a href="https://twitter.com/Twitter/status/942094257472409600?ref_src=twsrc%5Etfw">16 décembre 2017</a></blockquote>
			<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
		</div>
		<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>&mdash; Twitter (@Twitter) <a href="https://twitter.com/Twitter/status/942094257472409600?ref_src=twsrc%5Etfw">16 décembre 2017</a></blockquote>
			<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
		</div>
		<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>&mdash; Twitter (@Twitter) <a href="https://twitter.com/Twitter/status/942094257472409600?ref_src=twsrc%5Etfw">16 décembre 2017</a></blockquote>
			<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
		</div>
		<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>&mdash; Twitter (@Twitter) <a href="https://twitter.com/Twitter/status/942094257472409600?ref_src=twsrc%5Etfw">16 décembre 2017</a></blockquote>
			<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
		</div>
		<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>&mdash; Twitter (@Twitter) <a href="https://twitter.com/Twitter/status/942094257472409600?ref_src=twsrc%5Etfw">16 décembre 2017</a></blockquote>
			<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
		</div>
		<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>&mdash; Twitter (@Twitter) <a href="https://twitter.com/Twitter/status/942094257472409600?ref_src=twsrc%5Etfw">16 décembre 2017</a></blockquote>
			<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
		</div>
	</div>
</div>

</body>
</html>
Run codeHide result

Chrome capture

Chrome capture

Firefox, Safari .. Capture

Firefox, Safari .. Capture

+4
source share
1 answer

: Twitter widget.js ! <head> . , 4.0.0-beta 4.0.0-beta.2 Bootstrap.

:
-, Twitter - . Firefox Safari <iframe>, Chrome Twitter , Shadow DOM. , canIUse.com , Chrome.

<iframe> css iframe, , .
Twitter column-count css, .card-columns .card. , (, spin.js jQuery-mobile).

, Twitters - css . . , .card-columns, .

, :

  • , .row .col-4 s. , Twitter , , . :

<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>&mdash; 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>&mdash; 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>&mdash; 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>&mdash; 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>&mdash; 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>&mdash; 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>
Hide result

script , , . , open, . , script , . ( , .) Codepen.

// Wait for `widgets.js` to get loaded
window.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>';
        });
    });
});
+2

Source: https://habr.com/ru/post/1690922/

More articles:


All Articles