Баги обозревателя Opera next .
mod . 14.11.2011

Opera - баги и артефакты обозревателя якобы поддерживающего стандарты HTML 4.01 , CSS 2.1 и CSS 3 .
Обнаруженные в процессе создания сайта . С описанием и примерами HTML текста , скриншотами багов .

• Главная страница сайта .
• Баги Mozilla FireFox .
• Баги Google Chrome .
Суть проблемы в применении стиля бордюра CSS 3 - border-radius в таблицах , а именно в тегах table и td . В обозревателях Internet Explorer 9 и Google Chrome указанные зоны выполнены с закруглением углов в стилях тегов , как это и планировалость изначально . А как это выглядит на странице в обозревателе Opera можете убедиться сами .
Для более наглядной демонстрации факта бага далее приведён пример HTML и скриншоты из которых ясно видна суть проблемы ....
HTML примера .
<table style="background-image: url('http://runettex.clan.su/FPD/FPPG.png'); border: 1px transparent solid; border-radius: 1.7em; width: 30%; margin: 5em 0px 0px 5em;" cellpadding="0" cellspacing="0">
<tr style="background-image: url('http://runettex.clan.su/FPD/FPPG.png');">
<td colspan="2" style="border: 1px transparent solid; border-radius: 1.7em 0px 0px 1.7em; padding: 1em;">
<img src="http://runettex.clan.su/FPC/test.gif" style="width: 3em;">
<img src="http://runettex.clan.su/FPC/test.gif" style="width: 3em;">
</td>
<td style="border: 1px transparent solid; border-radius: 0px 1.7em 1.7em 0px; padding: 1em;">
<img src="http://runettex.clan.su/FPC/test.gif" style="width: 3em;"></td>
</tr>
<tr>
<td style="padding: 1em;"><img src="http://runettex.clan.su/FPC/test.gif" style="width: 3em;"></td>
<td style="padding: 1em;"><img src="http://runettex.clan.su/FPC/test.gif" style="width: 3em;"></td>
<td style="padding: 1em;"><img src="http://runettex.clan.su/FPC/test.gif" style="width: 3em;"></td>
</tr>
<tr style="background-image: url('http://runettex.clan.su/FPD/FPPG.png');">
<td colspan="3" style="border: 1px transparent solid; border-radius: 1.7em; padding: 1.7em; text-align: center;">
<img src="http://runettex.clan.su/FPC/test.gif" style="width: 3em;">
<img src="http://runettex.clan.su/FPC/test.gif" style="width: 3em;">
<img src="http://runettex.clan.su/FPC/test.gif" style="width: 3em;">
</td>
</tr>
</table>
Скриншот примера как он отображается в обозревателях Internet Explorer 9 и Google Chrome 12 .....
А вот так пример отображается в обозревателе Opera .....
Суть проблемы в том что обозреватель Opera применяет стиль бордюра - border-radius в тегах таблицы только в теге table , стиль бордюра border-radius в теге td Opera не применяет , несмотря на то что он там прописан . Цветными указателями указаны , " углы " фона тега td , незакруглённые ни стилем прописанным в самом теге и не ограниченные стилем бордюра в теге table ( указатели на белом фоне ) .
Само собой разумеется так же отсутствует закругление фона тега td и изнутри конструкции примера ( указатели на фоне самого элемента ) .
Выловили баг в работе обозревателя со стандартом CSS 3 , а именно со стилем бордюра - border-radius в сочетании со скрипами jQuery . Что не удивительно , Opera так же страдает подобным багом .
пример :
span class="wit">• http://runettex.clan.su/publ/7-1-0-60
и другие материалы доступные со страниц :
• http://runettex.clan.su/index/0-29
• http://runettex.clan.su/index/0-33
• http://runettex.clan.su/index/0-30
• http://runettex.clan.su/index/0-34
Проблема в том что border-radius рисуется обозревателем под скриншотами а не над ними , не обращая внимания на стиль overflow: hidden и border-radius внешней рамки ограничивающих отображаемую длинну линейки изображений . То что углы изображений перекрывают border-radius видно невооружнным глазом по углам скриншота бага .
Скриншот изображения jQuery горизонтальной бегущей строки скриншотов проигрывателей в обозревателе Opera :

Скриншоты изображений страниц характерные для обозревателей IE 9 и FireFox 5 :

.
Неприятный артефакт Opera . Размеры изображений не соответствуют тем что прописаны в HTML страницы , пока курсором не " пройдёшься " по ним . Да и зазоры между блоками намного превышают заданные в стилях , впрочем это не удивительно . Opera давно славится своей трактовкой некоторых едениц измерения размеров .....
• Домены : Alpha 2, Alpha 3, ISO коды, символика. По названиям государств Австралия - Бельгия
• Домены : Alpha 2, Alpha 3, ISO коды, символика. По названиям государств Бенин - Гайана
• Домены : Alpha 2, Alpha 3, ISO коды, символика. По названиям государств Гамбия - Западная Сахара
• Домены : Alpha 2, Alpha 3, ISO коды, символика. По названиям государств Зимбабве - КНР
• Домены : Alpha 2, Alpha 3, ISO коды, символика. По названиям государств Кокосовые острова - Малави
• Домены : Alpha 2, Alpha 3, ISO коды, символика. По названиям государств Малайзия - Ниуэ
• Домены : Alpha 2, Alpha 3, ISO коды, символика. По названиям государств Новая Зеландия - Реюньон
• Домены : Alpha 2, Alpha 3, ISO коды, символика. По названиям государств Россия - Сомали
• Домены : Alpha 2, Alpha 3, ISO коды, символика. По названиям государств Судан - Финляндия
• Домены : Alpha 2, Alpha 3, ISO коды, символика. По названиям государств Фолклендские острова - Япония
• Домены : Alpha 2, Alpha 3, ISO коды, символика. По кодам ISO 000/099
• Домены : Alpha 2, Alpha 3, ISO коды, символика. По кодам ISO 100/199
• Домены : Alpha 2, Alpha 3, ISO коды, символика. По кодам ISO 200/299
• Домены : Alpha 2, Alpha 3, ISO коды, символика. По кодам ISO 300/399
• Домены : Alpha 2, Alpha 3, ISO коды, символика. По кодам ISO 400/499
• Домены : Alpha 2, Alpha 3, ISO коды, символика. По кодам ISO 500/599
• Домены : Alpha 2, Alpha 3, ISO коды, символика. По кодам ISO 600/699
• Домены : Alpha 2, Alpha 3, ISO коды, символика. По кодам ISO 700/799
• Домены : Alpha 2, Alpha 3, ISO коды, символика. По кодам ISO 800/899
Скриншот изображения страницы с артефактом в обозревателе Opera :

Скриншоты изображений страниц характерные для обозревателей IE 9 , FireFox 5 и Google Chrome не приводим , как эти страницы выглядят в этих обозревателях в соответствии с HTML стилями можете убедиться сами , перейдя по ссылками .
Неприятный артефакт Opera . А это " разъезд " кнопок меню вообще трудно объяснить ....
пример HTML меню страниц из предыдущего ляпа :
<table cellpadding="0" cellspacing="0" style="margin-top: 0.5em; width: 99%;">
<tr>
<td class="manmnu relmnu">
<img alt="bot" src="/FPD/bot01.png" class="intbtt intbot"><span class="spaall">Часть первая</span></td>
<td class="manmnu relmnu">
<a href="/index/0-436"><img alt="bot" src="/FPD/bot01.png" class="intbtt intbot"><span class="spaall">Часть вторая</span></a></td>
<td class="manmnu relmnu">
<a href="/index/0-437"><img alt="bot" src="/FPD/bot01.png" class="intbtt intbot"><span class="spaall">Часть третья</span></a></td>
<td class="manmnu relmnu">
<a href="/index/0-438"><img alt="bot" src="/FPD/bot01.png" class="intbtt intbot"><span class="spaall">Часть четвёртая</span></a></td>
<td class="manmnu relmnu">
<a href="/index/0-439"><img alt="bot" src="/FPD/bot01.png" class="intbtt intbot"><span class="spaall">Часть пятая</span></a></td>
<td class="manmnu relmnu">
<a href="/index/0-440"><img alt="bot" src="/FPD/bot01.png" class="intbtt intbot"><span class="spaall">Часть шестая</span></a></td>
<td class="manmnu relmnu">
<a href="/index/0-441"><img alt="bot" src="/FPD/bot01.png" class="intbtt intbot"><span class="spaall">Часть седьмая</span></a></td>
<td class="manmnu relmnu">
<a href="/index/0-442"><img alt="bot" src="/FPD/bot01.png" class="intbtt intbot"><span class="spaall">Часть восьмая</span></a></td>
<td class="manmnu relmnu">
<a href="/index/0-443"><img alt="bot" src="/FPD/bot01.png" class="intbtt intbot"><span class="spaall">Часть девятая</span></a></td>
<td class="manmnu relmnu">
<a href="/index/0-444"><img alt="bot" src="/FPD/bot01.png" class="intbtt intbot"><span class="spaall">Часть десятая</span></a></td>
<.table>
• Домены : Alpha 2, Alpha 3, ISO коды, символика. По названиям государств Австралия - Бельгия
• Домены : Alpha 2, Alpha 3, ISO коды, символика. По названиям государств Бенин - Гайана
• Домены : Alpha 2, Alpha 3, ISO коды, символика. По названиям государств Гамбия - Западная Сахара
• Домены : Alpha 2, Alpha 3, ISO коды, символика. По названиям государств Зимбабве - КНР
• Домены : Alpha 2, Alpha 3, ISO коды, символика. По названиям государств Кокосовые острова - Малави
• Домены : Alpha 2, Alpha 3, ISO коды, символика. По названиям государств Малайзия - Ниуэ
• Домены : Alpha 2, Alpha 3, ISO коды, символика. По названиям государств Новая Зеландия - Реюньон
• Домены : Alpha 2, Alpha 3, ISO коды, символика. По названиям государств Россия - Сомали
• Домены : Alpha 2, Alpha 3, ISO коды, символика. По названиям государств Судан - Финляндия
• Домены : Alpha 2, Alpha 3, ISO коды, символика. По названиям государств Фолклендские острова - Япония
• Домены : Alpha 2, Alpha 3, ISO коды, символика. По кодам ISO 000/099
• Домены : Alpha 2, Alpha 3, ISO коды, символика. По кодам ISO 100/199
• Домены : Alpha 2, Alpha 3, ISO коды, символика. По кодам ISO 200/299
• Домены : Alpha 2, Alpha 3, ISO коды, символика. По кодам ISO 300/399
• Домены : Alpha 2, Alpha 3, ISO коды, символика. По кодам ISO 400/499
• Домены : Alpha 2, Alpha 3, ISO коды, символика. По кодам ISO 500/599
• Домены : Alpha 2, Alpha 3, ISO коды, символика. По кодам ISO 600/699
• Домены : Alpha 2, Alpha 3, ISO коды, символика. По кодам ISO 700/799
• Домены : Alpha 2, Alpha 3, ISO коды, символика. По кодам ISO 800/899
Скриншот страницы с артефактом в обозревателе Opera :

Скриншоты изображений страниц характерные для обозревателей IE 9 , FireFox 5 и Google Chrome не приводим , как эти страницы выглядят в этих обозревателях в соответствии с HTML стилями можете убедиться сами , перейдя по ссылками .
Ещё один баг обозревателя , прорисовывает бордюр , прописанный стилем не только в своём слое но и в слое образованном jQuery плавного спойлера , на страницах таблиц соотношения dBu/V . Вследствие чего пришлось отказаться от применения тега стиля outline заменив его тегом border ....

Для более наглядной демонстрации факта бага далее приведён пример HTML и скриншоты из которых ясно видна суть проблемы и то что это глобальный баг а не связан с каким либо определённым применением тега стиля в комбинации с элементами образуемыми работой jQuery скрипта ....

HTML примера .
<div style="position: relative; left: 0px; top: 0px; font: italic bold 0.8em Tahoma">
<div style="position: absolute; left: 0px; top: 2em; width: 20em; background-color: #aaf; height: 5em; outline: 1px #000 solid; text-align: right; padding: 1em; z-index: 1;">Слой № 1 z-index: 1</div>
<div style="position: absolute; left: 2em; top: 0px; width: 10em; background-color: #faf; height: 10em; padding: 3em 0px 0px 0.7em; border: 1px #000 solid; z-index: 3;">Слой № 2 z-index: 2 </div>
</div>
Скриншот примера как он должен отображаться в обозревателях .....
А вот так пример отображается в обозревателе Opera . Проблема заключается что обозреватель неверно трактует положение стиля outline прорисовывая его насквозь слоя HTML примера . Сделали вывод что следует отказаться от применения тега outline в аналогиных случаях , применения на странице HTML с использованием слоёв в вёрстке как постоянно расположенных так и вызываемых какими либо функциями . В любом случае , в случае применения тега стиля outline следует досконально проверять правильность его отображения обозревателем Opera ...

Non-Commercial Use: Free Runettex_team_ESQ © 2009 - 2024 Хостинг от uCoz