Twitter oMmbed виджеты перекрываются в Safari

Question

Я использую oEmbed твиты в своем приложении и имею проблему с тем, как они отображаются в Safari. Эти твиты рендеринга, как ожидается, в Firefox и Chrome, но в Safari, начальный визуализации имеет твит виджетов перекрывающихся, как показано ниже:

Это, как они должны показывать и как они делают в другие браузеры:

Теперь, если я изменить ширину окна после того, как чириканье делают, они выскакивают на место так, как они должны. Я не могу понять, почему это было и из-за отсутствия ошибок, я немного застрял. Я использую эту библиотеку: 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-widget { 
    display: inline-block; 
    vertical-align: top; 
    padding: 2px; 
    position: relative; 
} 

Я также попытался оборачивать код контроллера, который загружает твит массив в $ timeout, но это не помогло. Мысли?

Answer 1

Хорошо, поэтому я исправил это. Насколько я могу судить, виджет oEmbed показывал после ng-repeat создал элемент для каждого твита. Таким образом, элементы изначально имели нулевую ширину и располагались в шахматном порядке, как показано на первом изображении из-за границы css между твитами. Я предположил (ошибочно), что определение ширины в опциях oEmbed будет охватывать это, но решение заключалось в определении ширины css для класса контейнера, который я создал для твитов.

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

Это решило проблему.