Блог

Главная - Вопросы по программированию - Вспышка внутри IFRAME, в Safari, разрывает позицию: фиксированные элементы

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

#html #css #flash #safari #css-position

#HTML #css #flash #safari #css-позиция

Вопрос:

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

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

  1. Flash
  2. …внутри IFRAME (например, модального окна, Fancybox и т. Д.)
  3. … будет «ломать» любые элементы «position: fixed» также в этом IFRAME.

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

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

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

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

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

Арррррх! Есть какие-нибудь советы? Бесчисленные поиски оказались безрезультатными. Спасибо!

Ответ №1:

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

Когда в нужном фрейме есть div с вложенной flash и стиль div с «position: relative; 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 со вспышкой. Все остальное может быть как есть.

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

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

Да пребудет с вами Сила.