Пещера отшельного фердопердозника

2009-07-14

Opera scrollbar problem

Рубрика: web programming — Метки: , , — datacompboy @ 19:01:35 | 1,085 views

English version, in short: if you have some block for all size of screen, that should cut-off all content (width/height 100% + overflow: hidden), opera cuts off its content, but left scrollbar for empty content.
To fix that problem, you can try replace

#some { overflow: hidden; width: 100%; height: 100%; }

with

#some { overflow: hidden; position: absolute; left:0; right:0; top:0; bottom:0; }

That helps opera to correctly cut-off all content without adding scrollbar. That doesn’t break Mozilla/Safari/Chrome, but breaks even IE8, so you should override CSS for IE8 with conditional comments.

Поговорим опять о багах в Опере. на этот раз — лишний скроллбар.
Вот у нас есть код:

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
    <link rel="stylesheet" href="screen.css" type="text/css" />
</head>
<body>
<div id="nofooter">
    <div id="main-page-sizer">
        <div id="main-page-wrapper">
            <div id="main-page">
                <div id="main-bg"></div>
            </div>
        </div>
    </div>
<div id="footer-pusher"></div></div>
<div id="footer">
    <div id="logo-footer-mover"><div id="logo-footer"></div></div>
</div>
</body>
</html>

И парный к нему CSS:

html{ height: 100%;}
body { height: 100%; margin: 0; padding: 0; position: relative; background: #6c1700 50% 0; }
#nofooter{ min-height: 697px; min-width: 1000px; height: 100%; margin-bottom: -1px; position: relative; }
#footer-pusher { height: 1px; clear: both; line-height: 1px; font-size: 1px; }
#footer { height: 1px; line-height: 1px; min-width: 1000px;}
#main-page-sizer
{
    min-height: 697px;
    margin-bottom: -1px;
    height: 100%;
    width: 100%;
    overflow: hidden;
    position: relative;
}
#main-page-wrapper
{
    margin: 0 -140px;
    overflow: hidden;
    height: 100%;
}
#main-page
{
    background-color: #4c1700;
    width: 1280px;
    height: 100%;
    margin: 0 auto;
    position: relative;
    background: red;
}
#main-bg
{
    background: green no-repeat;
    position: absolute;
    left: 356px;
    top: 0;
    width: 634px;
    height: 970px;
}
#logo-footer-mover
{
    width: 202px;
    height: 1px;
    margin: 0 auto;
    position: relative;
}
#logo-footer
{
    background: blue;
    width: 202px;
    height: 71px;
    position: absolute;
    top: -70px;
    left: 0;
}

Итоговая страница тянется по Y от ~700px до 1000px без скроллбара, причем во всем этом пределе от main-bg видно столько, сколько влезло.
(На самом деле, блок main-page имеет размер 1280*970px, и в нем может быть размещено что угодно, причем это что угодно будет отцентровано по иксу в размерах от 1000px (при сжимании от 1280 до 1000 слева и справа части скрываются без появления полосы прокрутки), и прижато по игреку к верху, причем всё, находящееся внизу ниже 700px отрезается тоже без появления полосы прокрутки. При размере больше 970px размер main-page должен быть 100% (там сейчас и прописано 100%), чтобы другие расположенные в нем блоки с height=100% были максимум, всё остальное занимает его бекграунд.

Забудем про проблемы IE (они легко фиксятся через expression для 6 и 7), и поговорим о интересном баге с прокруткой в опере.
При сворачивании, как только размер #main-page-wrapper становится меньше размера #main-bg, то содержимое #main-bg корректно обрезается, но появляется полоса прокрутки, несмотря на overflow:hidden. Причем за пределами ничего нет, там показывается только бекграунд от body.

После долгих копаний, удалось найти workaround вокруг этой проблемы: вместо

#main-page-wrapper {
    overflow: hidden;
    height: 100%;
}

Используется

#main-page-wrapper {
    overflow: hidden;
    position: absolute; left: 0; top: 0; bottom: 0; right: 0; /* Opera scrollbar workaround */
}

То есть меняем блок, с параметрами width/height: 100%+overflow:hidden на position: absolute 0/0/0/0 + overflow:hidden.
Теоритически, это одно и то же. На практике созаёт проблемы с IE8, которые лечатся через условные комментарии и переопределение на position:static+height:100%.

В общем, это решает проблему… но не совсем. В результате всё хорошо показывается если загрузить страницу в каждом из разрешений.
Если же загрузить в маленькое окно и начать тянуть только за нижнюю границу — то отрисовка бекграундов-изображений не повторяется, рисуется только сплошной цвет. До тех пор, пока окно не будет изменено еще и по горизонтали, или не будет перезагружена страница.

Workaround’а для этой проблемы уже не удалось найти.

Сайт работает на WordPress