Twitter oEmbed 小部件在 Safari 中重叠

Question

我在我的应用程序中使用 oEmbed 推文，但它们在 Safari 中的呈现方式存在问题。推文在 Firefox 和 Chrome 中按预期呈现，但在 Safari 中，初始呈现的推文小部件重叠，如下所示：

这是它们在其他浏览器中的显示方式和呈现方式：

现在，如果我在推文呈现后调整 window 的宽度，它们就会按应有的方式弹出。我不太明白为什么会这样，并且由于没有错误，我有点卡住了。我正在使用这个库：https://github.com/arusahni/ngtweet，这是与我的应用程序相关的 HTML

<div ng-repeat="tweet in updatedTweets | orderBy:'-'" ng-init="getTweetTotals(tweets)" class="twitter-widget">
                        <twitter-widget twitter-widget-id="tweet.id_str" twitter-widget-options="{'width': '300px', 'cards': 'hidden'}">
                        </twitter-widget> 
</div>

css 用于 Twitter 小部件 class:

.twitter-widget {
  display: inline-block;
  vertical-align: top;
  padding: 2px;
  position: relative;
}

我还尝试将加载 tweet 数组的控制器代码包装到 $timeout 中，但这没有帮助。想法？

Answer 1

好的，所以我解决了这个问题。据我所知，oEmbed 小部件在 ng-repeat 为每条推文创建元素后呈现。因此，元素最初具有空宽度，并且由于推文之间的 css 边距而交错排列，如第一张图片所示。我假设（错误地）在 oEmbed 选项中定义宽度可以解决这个问题，但解决方案是为我为推文创建的容器 class 定义 css 宽度。

.twitter-widget {
width: 304px; //added a few pixels for the padding in the widget
}

这解决了问题。

Twitter oEmbed 小部件在 Safari 中重叠

Twitter oEmbed widgets overlap in Safari

html

angularjs

twitter

safari

oembed