Есть вероятность глюков в Chrome/Chromium 31, Opera 18: селекторы вроде nth-last-child могут отрабатывать некорректно


    В issues хрома за последние несколько дней появилось несколько issue, в которых описывается примерно следующий сценарий: используется тяжелый css3 селектор, в результате чего идет некорректное обращение. В том числе может некорректно работать селектор к нескольким объектам через запятую (#a, #b, #c etc.), однозначно некорректно работает nth-last-child. Гарантированно выявлен баг с ним.
    Проблема, судя по всему, находится в механизме css-запросов, так как document.querySelector также некорректно адресуется. Что самое неприятное — jQuery так же опирается на нативные функции (если они существуют). Таким образом, сложные jQuery-запросы также перестали отрабатывать корректно.
    Если в ваших проектах используется nth-last-child, подробности бага под катом

    Баг проявляется под все ОС: репорты в репозитории хрома идут под windows, мы натолкнулись на проблему в Mac OS.
    В 31 версии, как оказалось, появилось очень странное поведение nth-last-child:
    :nth-last-child(1) == :last-child, возможно, дело в оптимизациях запросов.
    :nth-last-child(2) == null
    :nth-last-child(3) == :nth-child(1)
    :nth-last-child(4) == :nth-child(2)
    и так далее.
    При этом такое поведение включается при любом изменении стилей. Это может быть и :hover, и инициализация jQuery.

    Субьективно ощущения подсказывают, что другие «тяжелые» css3-селекторы так же могут не отрабатывать корректно.

    В нашем случае — сразу после обнаружения мы проверили все проекты и в двух кусках кода обнаружили $(':nth-last-child(3)'). К счастью, селектор повлиял на функционал незначительно. В других проектах подобные селекторы также иногда встречаются (как в стилях, так и в коде) поэтому будьте готовы к немного необычной работе сайтов, и чем сложнее сайт, тем больше вероятность странного поведения в самом популярном в мире автоматически обновляющемся браузере как минимум в ближайшие несколько дней.
    Да, вроде бы один из обычных багов Хрома, но неприятность в том, что использование nth-last-child в качестве костыля в некоторых проектах сейчас, к сожалению, относительно частая практика, а, например, решение с условной шириной блоков для заголовков появилось еще два года назад.

    Примеры некорректного поведения:

    Немного модифицированный код из одного из примеров:
    http://codepen.io/anon/pen/buDsp
    Для запуска глюка поводите мышкой по кругам.
    Гифка с тем, что происходит: (просто ховер, не клики)


    При этом nth-of-type и nth-last-of-type отрабатывает корректно, так что в большинстве случаев можно использовать их как временное решение.
    Ах, да, issue, конечно же, уже есть в трекере хромиума, как и писалось в самом начале, это просто информация для тех, у кого используется nth-last-child в продакшне — что этот селектор с большой вероятностью будет работать некорректно.
    Uprock
    Компания
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама

    Комментарии 9

      +2
      В Opera 18 тоже ломается. (там Chromium 31)
        0
        спасибо, вынес в заголовок
          +4
          Зато в 12.16 все спокойно =)))))
          0
          В Chrome 33.0.1713.0 canary все в порядке
            0
            да, на скриншоте видно :)

            зато в канарейке месяц назад попытка проскроллить заканчивалась крэшем на некоторых сайтах. Меня это (и то что он два месяца назад зависал при попытке открыть консоль разработчика) убедило перейти на просто хром все-таки.
              0
              В 32.0.1700.19 beta тоже всё ок работает. В багтрекере есть бага по этому поводу. code.google.com/p/chromium/issues/detail?id=319751
                0
                да, там несколько баг по этому поводу, просто это всего второй случай на моей памяти, когда уже давно и стабильно работающая, а значит — допустимая к использованию и вполне активно использующаяся в продакшне фича падает из-за обновления автообновляющегося браузера. До этого было только раз, когда mozilla убрала из открытого доступа классы списков нод(HTMLNodeMap, кажется). Но их в общем-то пользовать и не стоило, а тут вполне устоявшийся css3 псевдокласс. Решил, что предупредить сообщество стоит, потому что у меня лично было минут пять-семь паники из-за этого.
              0
              text-align-last до сих пор не работает. Даже в IE8 через Selectivizr его можно заставить работать, но не в Chrome. :(
                0
                Хром кажется версии с 28 не на вебките. Но баг видно живет и в блинке.

              Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

              Самое читаемое