Элементы, скрытые с переполнением, все еще доступны на android

Question

У меня есть виджет Facebook-комментарии, содержащийся в родительском div, ведьма разрезает его по вертикали, используя скрытый переполнения. Я настроил его таким образом, чтобы я мог начать показывать только часть содержимого, а затем расширять родительский контейнер с помощью jQuery.

Это отлично работает на каждом крупном браузере (внедряя сафари для iPhone), однако в Android (протестированном на Android 4.0, не уверенном в версии браузера) контент за пределами переполненного div, пока не отображается, доступен. Пользователь может щелкнуть ссылки, которые они не видят, что явно нежелательное поведение.

Мой HTML:

<div class="pageBlock column5050 column2">   
    <div style="" class="ext_container"> 
    <div data-mobile="false" data-width="" data-num-posts="10" data-href="http://na.se/redesign2012/kundcenter" class="fb-comments fb_iframe_widget"> 
     <span style="height: 1049px; width: 550px;"> 
     <iframe scrolling="no" id="fcb3ba7898c46" name="f169222f1ff27fe" style="border: medium none; overflow: hidden; height: 1049px; width: 550px;" class="fb_ltr " src="https://www.facebook.com/plugins/comments.php?api_key=113851685335230&amp;channel_url=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D8%23cb%3Df12db7f9bc71f98%26origin%3Dhttp%253A%252F%252Fna.se%252Ffb9561675e1892%26domain%3Dna.se%26relation%3Dparent.parent&amp;href=http%3A%2F%2Fna.se%2Fredesign2012%2Fkundcenter&amp;locale=sv_SE&amp;mobile=false&amp;numposts=10&amp;sdk=joey&amp;width=550"></iframe> 
     </span> 
    </div> 
    </div> 
    <div class="fb_expand_btn expand_btn"> 
    <span class="expand_capt">Visa fler...</span> 
    </div> 
    <script type="text/javascript"> 
    [...]js/jQuery to expand/contract "ext_container"[..] 
    </script> 

</div> 

Все внутри «ext_container» порожден facebook комментариев виджетом и я ограниченный контроль над HTML, поскольку я использую третью сторону CMS.

Я использую следующий CSS

.fb-comments { 
    width: 100% !important; 
} 

.fb-comments span, .fb-comments iframe { 
    width: 100% !important; 
} 


.ext_container { 
    position: relative; 
    height: 440px; 
    overflow: hidden; 
    margin: 0 20px 20px; 
} 

.fb_expand_btn.expand_btn { 
    margin: 0 20px; 
} 

Мой сценарий изменяет только высота ext_container.

Я установил ext_container в положение: относительно из-за ошибки IE7, где он игнорировал бы мой переполнение: скрытый.

И, наконец, ширина 100% есть, потому что у вас есть полностью жидкая компоновка.

В любом случае, я попытался найти любую ссылку на описанное выше поведение, но при использовании n было бы очень полезно, если бы кто-то столкнулся с этим и получил решение.

Answer 1

Я подозреваю, что iframe получает ширину по умолчанию браузера. Попробуйте установить атрибут width iframe, а не просто установить стиль ширины.

Другими словами, попробуйте давая IFrame атрибут,

ширина = "550"

Iframes и CSS не всегда играют хорошо, особенно когда дело доходит до переполнения. Вы также можете установить атрибут высоты.