Особенность position:fixed, или почему мне пришлось заблокировать боковые вертикальные кнопочки типа «Оставьте свой отзыв»

    position:fixed
    Описанный эффект наблюдается под Firefox и на слабеньких ноутбуках, по этому пользователям такой комбинации посвящается.


    Проблема


    При наличие на странице элемента с position:fixed, в Firefox резко ухудшается плавность перерисовки страницы при скроллинге: страница скролится заметно медленнее а в области станицы, на одном уровне с таким элементом, наблюдаются искажения. И при всём этом сильно нагружается CPU. Всё это создаёт дискомфорт при сёрфинге.



    Раньше такие элементы попадались очень редко в сети, но в последнее время многие сайты начали устанавливать у себя скрипты сервисов сбора отзывов. И это привело к появлению разных висящих боковых кнопок на таких сайтах. Отзывы — дело, конечно, хорошее, но чтение таких сайтов сопровождается у меня описанными тормозами, с которыми я больше не мог мириться.

    Последней каплей стала боковая панелька на Хабре, и она как раз заставила меня действовать.


    Решение


    Скорее всего большинство посоветует купить более мощный комп и не париться. Но мне приходится обходится тем, что есть, так что это не наш путь :)

    С популярными сервисами я разобрался, банально добавив в AdBlock:
    |http://*uservoice.com/*/tab.js?*
    |http://reformal.ru/tab.js?*


    С Хабром так грубо не получится, так как эту панельку я использую очень часто. Но и оставить её с fixed я тоже не мог. Начав искать стили и скрипты я увидел, что я не один такой. Но это решение мне не подошло, так как оно просто убирает панельку, и сам автор написал, что хотелось бы её когда-то увидеть, может в другом месте…

    Тогда я попробовал скрывать панельку на onscroll — и оно заработало. Не идеально правда, но всё же панелька действительно прячется как только начинается прокрутка и все тормоза пропадают. А в конце скроллинга она появляется на своём месте.

    Userscript для Greasemonkey здесь.

    Вот такое нехитрое решение.

    Similar posts

    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 64

      –12
      ах вот это что, спасибо!
        –12
        так камон, рассказываем про минуса трусы
          +6
          Ты написал бесполезную кюкюкю. Я тоже, но ты сам попросил.
            +2
            вообще резонно
            • UFO just landed and posted this here
                +1
                Это пишет человек, который считает что «покультурнее» пишется раздельно;)
                  +6
                  Запятую пропустили, предлагаю вам пойти сделать харакири
                    +3
                    Да ошибся, извините. Но я не претендую на суперграмотного.
                    А в конце предложения, кстати, ставится точка.
                      +3
                      Grammar Nazi vs Grammar Nazi.

                      Вах!
                        +1
                        Убейтесь вы все!
                          0
                          Блин, ну хуже анонимусов, чесслово
                        +1
                        А на кого претендуете, на человека который до каждого столба дое«ется?
                          0
                          Я понял, что на культурное общение.

                          Прекрасное общение получилось :)
                    • UFO just landed and posted this here
              –1
              А можно узнать подробнее о Вашей конфигурации? Я обладатель P4-3Ghz, 1024Mb RAM, AGP GeForce 7300GT, FF 3.5.1. Я нахожу свою конфигурацию устаревшей, но описанной Вами проблемы не наблюдаю. Во всяком случае на Хабре.
                0
                Кстати, описанная Вами проблема действительно наблюдалась раньше, но еще в FF2. И решалась она средствами CSS. Жаль точнее не помню и сейчас не могу найти. Но если найду — обязательно отпишу.
                  +5
                  Погуглил, нашел репорт по данной проблеме.
                  Заодно понял, почему не наблюдаю данной проблемы у себя — отключена плавная прокрутка.
                  Инструменты -> Настройки -> Дополнительные -> Общие -> Использовать плавную прокрутку
                    +3
                    Да, я пробовал жить без плавной прокрутки — меня она ещё больше напрягает, так как установлен большой шаг скроллинга. Но Вы правы, то о чём я написал, имеет место именно при плавном скроллинге.
                      0
                      железо устаревшее…
                      плавная прокрутка отключена изначально т.к. на Asus eee 701 (630mHz) тормозит и без элементов position:fixed
                      +1
                      Только что посмотрел, что это именно эта проблема.

                      Но как такое может быть?
                      Reported: 2003-04-09 (!!!!!)
                      Status: NEW

                      Ведь у других браузеров нет такой проблемы.
                        0
                        Могу предположить, что это как-то связанно с механизмом отрисовки в Gecko.
                      +1
                      Думаю что можно как вы говорите через css решить, если просто подгружать пользовательские стили вдобавку. Просто как вариант.
                      +1
                      E8400/2Gb/7600gs тот же фф и вин7 — есть артефакты, не то чтобы сильно тормозило, но рвет картинку.
                        0
                        Крайне не хотелось бы рассматривать случай с использованием Windows 7… Надеюсь, Вы поймете.
                          +1
                          А чем плохой Вин7?
                            0
                            Не берусь судить плох он или нет, но драйвера не вызывают особого доверия. А согласитесь, что от драйвера видеоадаптера зависит не мало…
                          0
                          У меня Celeron 1.8GHz. Но, в любом случае, Вы очень хорошо описали то, что я долго не мог сформулировать — «рвет картинку».
                          0
                          У меня очень старенький ноут: Celeron 1.8GHz с int. video, 1Gb RAM
                            +2
                            О ужас, только что посмотрел, что у меня даже на 1.8, а только 1.6… размечтался :)
                          0
                            0
                            Да, у Вас практически такое же решение. Но я действительно искал (Firefox + position:fixed).
                            0
                            Именно поэтому я перешел на просмотр Хабра в Хроме.
                              –1
                              Панельки сбоку типа «оставьте свой отзыв» вообще какая-то глупость.
                                +9
                                Замечание по коду: unsafeWindow не рекомендуется использовать, особенно, когда можно обойтись без него:
                                window.addEventListener("scroll", function () {
                                ...
                                }, false);
                                
                                  0
                                  Вот за это спасибо. Не знал.
                                    0
                                    Уже обновил скрипт. Жаль заряд уже с утра закончился и нечем отблагодарить. Но я Вас запомнил :)
                                  • UFO just landed and posted this here
                                      +9
                                      [irony]ну должен же FF быть в чём-то хуже[/irony]
                                      +1
                                        0
                                        Может быть. Я вот вспомнил, что похожие тормоза я ловил на starcraft2.com, именно когда внизу страницы начинает проглядываться большая закреплённая фоновая картинка.

                                        Но состояние этого багрепорта совсем не радует…
                                        Reported: 2006-11-24
                                        Status: NEW
                                          0
                                          Если в этой проблеме виновата библиотека cairo, тогда ждать исправления стоит не от них. :(
                                          Я, к сожалению, упустил тот момент, когда эта проблема появилась. Возможно как раз с выходом Firefox 3.0 — где они стали использовать эту библиотеку.
                                        0
                                        Та же самая фигня с фаерфоксом 3.0.11 даже на не самом слабом компе — Core2Duo 1.6GHz.
                                          0
                                          Гм, я слышал что в експлорере 6 бороться с глюками при эмуляции pos: fixed помогает background-attachment: fixed, на body (ну или на диве, который под прикрепленным элементом), не хотите попробовать с ФФ, а вдруг поможет?

                                          Кстати, в Опере это не тормозит, но зато тормоза прокрутки вызывают элементы со свойством outline, недавно кучу времени убил, чтоб обнаружить это.
                                            0
                                            в експлорере 6 бороться с глюками при эмуляции pos: fixed помогает background-attachment: fixed
                                            Да, я знаю об этом. Оно лечит только глюк IE6.
                                            +2
                                            Однажды под новый год случилось на сайт устанавливать снежинки :-)
                                            В первой версии скрипта я сделал див 1x1 с position:fixed, а уже относительно него двигал все снежинки. Так вот когда начал проверять в ФФ я был в шоке, такого «расколбаса» на странице я даже в IE6 не видел :-) На тот момент пришлось отказаться от использования этого свойства.
                                              –1
                                              Сделайте нам как-то на пятницу с обеда такую страницу, ну пожалуйста? ;-)
                                              0
                                              не знаю, у меня лично при position:fixed у элементов ничего не тормозит, а вот если у background стоит fixed, то жутко все тормозит, причем не только в фф, и не только в винде, но и в mac os
                                                0
                                                А есть такой универсальный скрипт, чтобы на всех сайтах можно было прятать fixed-элементы?
                                                  0
                                                  Так можно упрятать какой-то важный элемент. Приходится подстраиваться под конкретные сайты, блокировать конкретные популярные сервисы.
                                                  0
                                                  Спасибо за скрипт. Но у меня все ровно остались проблемы.
                                                  Рендеринг страниц на хабре немного стал лучше. А вот все остальные сайты, продолжают тормозить при скроле.
                                                  Возможно у меня проблема в чем-то другом.
                                                    0
                                                    Этот скрипт написан только для панельки Хабра.
                                                      0
                                                      А я, действительно, так скрипт оформил, что и не видно, что он только для Хабрахабра. Исправил.
                                                      0
                                                      Я тоже ощущаю дискомфорт при прокрутке страниц с такими элементами в Fx.

                                                      Но что делать, если у меня в Google Chrome подобный эффект наблюдается на всех страницах?
                                                      Любая более-менее большая страница, и прокрутка в Хроме тормозит, нагрузка на процессор — 100 %…

                                                      Celeron 2.5 Ghz, конечно, слабый процессор, но Firefox и Opera вполне справляются.
                                                        0
                                                        Пользуясь случаем хочется попросить сообщество, прояснить один вопрос:

                                                        Имеется куча сайтов на IIS все они доступны в корпоративном интранете (большинство содержит баги), хочется приделать аналогичную кнопочку на каждую страницу, но вручную править страницы это не вариант.

                                                        Каким образом можно добавить к странице кусок javascript кода? (на сколько я понимаю это должен делать IIS). Просьба подсказать или кинуть ссылку.
                                                          0
                                                          /me Кажется нужно копать в сторону ISAPI фильтров, но чувствую, что там только геморой :(
                                                          0
                                                          Попробуй избавится от fixed'а. Есть способ, по-моему его предложил Сергей Чикуенок, суть заключается в том, что мы ложим див на всю видимую область, делаем ему overflow:auto, а body — overflow:hidden. Визуально тоже самое, но если положить элемент абсолютно вне дива, он встанет как fixed (это решение правило еще поведение fixed'a с png24 внутри при скроллинге в ff).

                                                          Если всякие fixed-приблуды важны — кури в эту сторону ;)
                                                            –1
                                                            Только не ложим, а кладём, воут?
                                                            0
                                                            Можно конечно посоветовать разработчикам использовать вместо честного position:fixed его эмуляцию, которая избавляет от «разрывов» при скроллинге (через дополнительный общий контейнер), но стоит ли? :)
                                                              0
                                                              А можно ссылку на баг в багзилле лисы?
                                                                0
                                                                Думаю, что это не баг, а скорее особенность рендеринга. На машинах помощнее и движке посвежее это уже не заметно как раньше.
                                                                Обладатели бюджетных ноутов сразу понимают о чем этот пост, и более тысячи установок скрипта тому подтверждение.
                                                                  0
                                                                  У меня вот не слабое железо и возможно поэтому я никогда этого не замечал, но всё равно — описанное вами поведение заслуживает создания соответствующего бага в багзилле.
                                                                  Если вас не затруднит — то, пожалуйста, создайте баг. Я бы и сам создал его, но я его не наблюдаю.
                                                                    0
                                                                    Посмотрите комментарий выше
                                                                      0
                                                                      Там статус бага resolved fixed, у вас ещё наблюдается этот баг?
                                                                        0
                                                                        Да, так как ноут остался тот же и Firefox на нем старой версии, и обновляться пока что не будет из-за поддержки расширений.

                                                                        Так же не ясно, в какай именно версии проблема была исправлена и была ли вообще реально исправлена, так как в комментарии к изменению статуса просто написано:
                                                                        I can no longer reproduce the slow scrolling effects with the latest hourlies.

                                                              Only users with full accounts can post comments. Log in, please.