Обходной путь для отрисовки ошибки при наложении <div>на <iframe>в Safari? - PullRequest
Новая
       15

Обходной путь для отрисовки ошибки при наложении <div>на <iframe>в Safari?

1 голос
/ 12 мая 2009

Я получаю очень странную ошибку при рисовании в Safari, и я хотел бы посмотреть, есть ли какое-нибудь решение, которое я мог бы предпринять ...

В настоящее время я отображаю

(абсолютно позиционированный, высокий z-индекс) поверх IFrame, который отображает содержимое с других сайтов. Просто для контекста,
- это панель инструментов, которую мы показываем на других сайтах.

Это хорошо работает во всех браузерах, но в Safari, когда IFrame показывает некоторые сайтов, а пользователь прокручивает страницу в IFrame, рисунок панели инструментов полностью облажается. *

Вот очень минималистичный POC, который воспроизводит проблему: 

<html>
<head>
</head>
<body>

<div id="mainContainer" style="position: absolute; top: 0; left:0; height: 500px; width: 500px; border: 2px solid red;">
    <div id="floatingToolbar" style="position: absolute; top: 20px; right: 20px; height: 40px; width: 300px; background-color: blue; color: red; z-index:200;">
        Toolbar!
    </div>
    <iframe id="theIFrame" src="http://www.overstock.com/Clothing-Shoes/Skynyrd-Mens-Rock-Roll-Freebird-Lyric-T-shirt/3023049/product.html?sec_iid=33972" style="position: absolute; top: 0; left:0; height: 500px; width: 500px; border: 2px solid red;">
    </iframe>
</div>

</body>
</html>

Если вы сохраните это на свой жесткий диск и откроете его с помощью Firefox, вы получите следующее:

alt text
(источник: crystalgears.com )

И если вы откроете его в Safari и дико прокрутите вверх и вниз внутри IFrame, это будет выглядеть так:

alt text
(источник: crystalgears.com )

Теперь, это только происходит в Safari. Хром работает правильно. Это происходит в Safari Windows и Mac. Я тестирую с Safari Windows 3.2.1 (525.27.1), но я видел, что это происходит в других версиях.

Чтобы сделать это более загадочным, это происходит только тогда, когда я показываю некоторые сайтов внутри IFrame. Например, если вы показываете www.google.com или www.stackoverflow.com, панель инструментов работает отлично. Тем не менее, элементы внутри www.overstock.com или www.amazon.com работают хорошо. Кроме того, эту проблему создают не только несколько сайтов. Это много . Мне не удалось найти какую-то особенную вещь, которая бы последовательно отличала «плохие» сайты от «хороших», но я не заглянул достаточно глубоко. Может быть, это DOCTYPE, или что-то еще. То, что кажется правилом (хотя оно, по общему признанию, очень мягкое), заключается в том, что «сложные» или «тяжелые» сайты имеют тенденцию вызывать его, в то время как «легкие» сайты этого не делают.

Есть идеи, что я мог бы сделать, чтобы обойти эту проблему?

Спасибо!

1 Ответ

1 голос
/ 12 мая 2009

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

Есть ли шанс, что вы могли бы использовать другое решение, чем iframe? Будет ли достаточно использовать библиотеку типа cURL для извлечения данных с другой страницы?

...