Получавам много странен бъг при рисуване в Safari и бих искал да видя дали има някакво решение, което мога да предприема...
В момента показвам ‹div› (абсолютно позициониран, висок z-индекс) върху IFrame, който показва съдържание от други сайтове. Само за контекст, ‹div› е лента с инструменти, която показваме над други сайтове.
Това работи добре във всички браузъри, но в 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, ще получите това:
(източник: crystalgears.com)
И ако го отворите в Safari и превъртите безумно нагоре и надолу във IFrame, ще изглежда така:
(източник: crystalgears.com)
Сега това само се случва в Safari. Chrome работи правилно. Това се случва в Safari Windows и Mac. Тествам със Safari Windows 3.2.1 (525.27.1), но съм виждал да се случва и в други версии.
За да направя това по-мистериозно, това се случва само когато показвам някои сайтове във вградената рамка. Например, ако показвате www.google.com или www.stackoverflow.com, лентата с инструменти работи перфектно. Въпреки това артикулите в www.overstock.com или www.amazon.com работят добре. Освен това не само няколко сайта ми създават този проблем. Това е мнаго. Не успях да намеря нещо специално, което да разграничава последователно „лошите“ сайтове от „добрите“, но не съм търсил достатъчно задълбочено. Може би това е DOCTYPE или нещо друго. Това, което изглежда като правило (въпреки че несъмнено е много меко), е, че „сложните“ или „тежки“ сайтове са склонни да го задействат, докато „леките“ сайтове не го правят.
Някакви идеи какво мога да направя, за да заобиколя този проблем?
Благодаря!
