Overflow-x в браузере Android 4.2.2 Stock

У меня возникла странная проблема в стандартном браузере на HTC One X под управлением Android 4.2.2.

У меня есть контейнер div с overflow-x, установленным на скрытый, и overflow-y, установленный на auto, он имеет фиксированные размеры ширины и высоты. Дочернее содержимое имеет ширину и высоту, превышающую его родительский. Идея в том, что вы должны иметь возможность прокручивать по вертикали, но не по горизонтали. Каждый браузер, который я видел, ведет себя правильно, и я получаю желаемый эффект. Однако в этом браузере Android Stock я могу свободно прокручивать по горизонтали И вертикали, что мне не нужно, поскольку overflow-x: hidden должен предотвращать горизонтальную прокрутку.

Я создал код для демонстрации основной проблемы: http://codepen.io/anon/pen/YXjZKR

Код здесь тоже:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1' />
    <style>


    .container{
        width: 300px;
        height: 500px;
        overflow-x: hidden;
        overflow-y: auto;

    }
    ul.pages {
        position: relative;
        margin: 0;
        padding: 0;
        white-space: nowrap;
    }
    li {
        width: 300px;
        line-height: 500px;
        display: inline-block;
        margin: 0;
        padding: 0;
        vertical-align: top;
        text-align: left;
        white-space: normal;
        height: auto;
    }
    li.one {
        background-color: red;
    }
    li.two {
        background-color: yellow;
    }
    li.three {
        background-color: green;
    }
    </style>
</head>
<body>
    <div class="container" id="container">
        <ul class="pages">
            <li class="one">Hello<br /><br /></li>
            <li class="two">good</li>
            <li class="three">bye</li>
        </ul>
    </div>
</body>

I have also noticed that if I shorten the height of the child content to be less than the container, then the content no longer scrolls horizontally either. Unfortunately the content will always be taller than the container.

Мы потратили часы, пытаясь понять, почему это происходит, и, что более важно, искали обходной путь, но пока безуспешно.

Любая помощь могла бы быть полезна.

Спасибо


android html css overflow android-browser
person jonboy    schedule 17.07.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я предполагаю, что для элементов <li> установлено значение display: inline-block, чтобы скрыть их по горизонтали. Если это так, ваша проблема в том, что элемент .container не является родительским элементом <li>.

Фактический родитель - ul.pages - по какой-то причине по умолчанию установлен на overflow: auto в этом браузере. Установите это на overflow-x: hidden, и все будет в порядке.

person Louis Féat    schedule 17.07.2015
comment
Вы правы в том, что li элементы - это display: inline-block, чтобы скрыть их по горизонтали. Чтобы дать немного больше контекста, каждый li - это страница книги, а .container div - это «область просмотра» для текущей видимой страницы. Я не хочу, чтобы пользователи переходили на следующую страницу. Вместо этого это делается нажатием кнопки. При нажатии элемент ul.pages сдвигается, изменяя его свойство left в CSS, так что следующий элемент li становится видимым. Ваше решение для установки overflow-x: hidden на ul.pages отсекает оставшиеся li, поэтому они фактически не будут видны при нажатии кнопки. - person jonboy; 18.07.2015