Вспышка внутри IFRAME в Safari нарушает положение: фиксированные элементы - PullRequest
Новая
       11

Вспышка внутри IFRAME в Safari нарушает положение: фиксированные элементы

1 голос
/ 21 октября 2011

Обновлено, так как я обнаружил, что это не обязательно вложенные IFRAME, а просто наличие Flash в документе IFRAME, который будет менять позицию: исправлено (также в IFRAME).

Это нереально.В Safari (Mac):

  1. Flash
  2. ... в пределах IFRAME (например, модальное окно, Fancybox и т. Д.)
  3. ... будет«Разбить» любую «позицию: фиксировать» элементы также внутри этого IFRAME.

Вот прекрасный пример: http://jsfiddle.net/6GP2A/ Обратите внимание, что у нас есть:

  1. AnIFRAME, содержащее Flash (видео YouTube).
  2. в другом документе IFRAMEd (jsfiddle IFRAME отображает результат)

Обратите внимание, что тот факт, что само видео является IFRAMEd, являетсякрасная сельдьЕсли бы Flash был просто тегом OBJECT без IFRAME, вы столкнулись бы с той же проблемой.

Если вы откроете это в Chrome, он будет работать как положено.DIV серого цвета «Привет, я исправлен» (то есть положение: исправлено) останется зафиксированным в нижней части.

В Safari серый DIV будет скользить при прокрутке страницы.

Arrrrgh!Любой совет?Бесчисленные поиски были бесплодными.Спасибо!

1 Ответ

2 голосов
/ 23 июля 2012

Я столкнулся с той же проблемой, но мы не можем отказаться от кадров. Так что я исследую эту проблему и нашел какое-то решение (наверное):

Когда есть div с вложенной вспышкой в ​​необходимом кадре и стиль div с "position :lative; z-index: -1;" тогда элементы с «position: fixed» в кадре выглядят нормально.

Например 

<html>
<head>
    <style> 
       .menu {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 40px;
       }
       .footer {
          width: 100%;
          height: 40px;
          position: fixed;
          bottom: 0;
          left: 0;
       }
    </style>
</head>
<body>
    <frameset rows="20,*">
        <frame>...</frame>
        <frame>
            <div class="menu">Header</div>
            <!-- Some content here -->
            <object width="440px" height="220px">
                <param value="opaque" name="wmode">
                <param value="http://youdomain.com/you_flash.swf" name="movie">
                <embed width="440px" height="220px" type="application/x-shockwave-flash" src="http://youdomain.com/you_flash.swf">
            </object>
            <!-- Some content here -->
            <div style="position: relative; z-index:-1;">
                <object width="10px" height="10px">
                    <param value="opaque" name="wmode">
                    <param value="http://youdomain.com/fake_flash.swf" name="movie">
                    <embed width="10px" height="10px" type="application/x-shockwave-flash" src="http://youdomain.com/fake_flash.swf">
                </object>
            </div>
            <div class="menu">Footer</div>
        </frame>
    </frameset>
</body>
</html>

Достаточно одного деления со вспышкой. Все остальное может быть как есть.

Одно замечание - вы не сможете нажать на вспышку в этом разделе. Я написал скрипт, который будет динамически добавлять div с пустой флэш-памятью в Safari на Mac.

Надеюсь, это полезно.

Да пребудет с тобой Сила.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...