Проблемы с отрисовкой элементов при скролинге.
От: AeroSpace  
Дата: 04.10.13 09:24
Оценка:
Здравствуйте.

Понадобилось сделать zoom для части документа, удалось решить это с помощью transform (нужен именно полноценный zoom, вариант с изменением размера шрифта, увы, не подходит).
Но наткнулся на следующую проблему — при вертикальном скролинге содержимое элемента перестает отрисовываться по мере прокрутки.
Можно что-нибудь с этим сделать?

  До и после прокрутки

  Минимальный код
<html>
    <head>
        <style>
            #scrollarea
            {
                width      : 4000px;
                height     : 4000px;

                background : #eeeeff;

                overflow   : hidden;
            }

            .item 
            {
                width      : 100px;
                height     : 100px;

                background : gray;
                overflow   : visible;

                transform  : translate(40px,40px) scale(5);
            }
        </style>
        <script>
        </script>
    </head>
    <body>
        <div id="scrollarea">
            <div class="item">
                <p>Hello world</p>
                <p>Hello world</p>
                <p>Hello world</p>
            </div>
        </div>
    </body>
</html>

  Минимальный код без использования transform
<html>
    <head>
        <style>
            #scrollarea
            {
                width  : 4000px;
                height : 4000px;

                background : #eeeeff;

                overflow : hidden;
            }

            .item
            {
                width  : 100px;
                height : 100px;

                background : gray;
                overflow   : visible;
            }
        </style>
        <script>
        </script>
    </head>
    <body>
        <div id="scrollarea">
            <div class="item">
                <p>Hello world</p>
                <p>Hello world</p>
                <p>Hello world</p>
                <p>Hello world</p>
                <p>Hello world</p>
                <p>Hello world</p>
                <p>Hello world</p>
                <p>Hello world</p>
                <p>Hello world</p>
                <p>Hello world</p>
                <p>Hello world</p>
                <p>Hello world</p>
                <p>Hello world</p>
            </div>
        </div>
    </body>
</html>
Re: Проблемы с отрисовкой элементов при скролинге.
От: c-smile Канада http://terrainformatica.com
Дата: 05.10.13 16:49
Оценка: 2 (1)
Здравствуйте, AeroSpace, Вы писали:

AS>Здравствуйте.


Ага, вижу. Спасибо за пример. Чиню.
Re[2]: Проблемы с отрисовкой элементов при скролинге.
От: AeroSpace  
Дата: 06.10.13 10:46
Оценка:
CS>Ага, вижу. Спасибо за пример. Чиню.

Тот пример заработал, спасибо.
Но вот так не хочет, проблема воспроизводится:

  Минимальный пример с transform scale на scrollable area
<html>
    <head>
        <style>
            #scrollarea
            {
                width      : 4000px;
                height     : 4000px;

                background : #eeeeff;
                transform  : translate(1000px,1000px) scale(2);

                overflow : hidden;
            }

            .item 
            {
                width      : 100px;
                height     : 100px;

                background : gray;
                overflow   : visible;
            }
        </style>
        <script>
        </script>
    </head>
    <body>
        <div id="scrollarea">
            <div class="item">
                <p>Hello world</p>
                <p>Hello world</p>
                <p>Hello world</p>
            </div>
        </div>
    </body>
</html>
Re[2]: Проблемы с отрисовкой элементов при скролинге.
От: AeroSpace  
Дата: 06.10.13 11:30
Оценка: 40 (1)
Так же, если в изначальный пример добавить элементы управления — они неактивны (нет реакции на нажатие).

  Минимальный пример приводящий к поломке элементов управления (3.0.0.5)
<html>
    <head>
        <style>
            #scrollarea
            {
                width      : 4000px;
                height     : 4000px;

                background : #eeeeff;

                overflow   : hidden;
            }

            .item 
            {
                width      : 100px;
                height     : 100px;

                background : gray;
                overflow   : visible;

                transform  : translate(40px,40px) scale(5);
            }
        </style>
        <script>
        </script>
    </head>
    <body>
        <div id="scrollarea">
            <div class="item">
                <p>Hello <a href="#">world</a></p>
                <input type='text' style='width : 50px' /> 
                <p>Hello world</p>
            </div>
        </div>
    </body>
</html>
Re[3]: Проблемы с отрисовкой элементов при скролинге.
От: c-smile Канада http://terrainformatica.com
Дата: 08.10.13 04:32
Оценка:
Здравствуйте, AeroSpace, Вы писали:

AS>Так же, если в изначальный пример добавить элементы управления — они неактивны (нет реакции на нажатие).


(безотносительно к самой проблеме которая есть мой баг конечно же) То, что ты строишь имеет какое-то отношение к accessibility ?
Re[4]: Проблемы с отрисовкой элементов при скролинге.
От: AeroSpace  
Дата: 08.10.13 17:48
Оценка:
CS>(безотносительно к самой проблеме которая есть мой баг конечно же) То, что ты строишь имеет какое-то отношение к accessibility ?
Нет не имеет. Необходим zoom документа специфичной структуры.
 
Подождите ...
Wait...
Пока на собственное сообщение не было ответов, его можно удалить.