Позиционирование Sticky и Will Change Transform приводит к добавлению ширины полосы прокрутки к содержимому только в Chrome

Я вижу странную проблему и потратил немало времени, пытаясь ее отследить, как через SO/ блоги, так и обнаруживая активную проблему в трекере ошибок Chrome.

Ссылка: https://jsfiddle.net/Lftwqh8p/1/

Проблема: это происходит только в Chrome. В JS у меня есть закомментированная строка для переключения между использованием миксинов. Оба имеют свои проблемы с одной и той же корневой проблемой.

Проблемное изображение: введите описание изображения здесь

Так что мы видим ширину полосы прокрутки

::-webkit-scrollbar {
  width: 25px;
  height: 10px;
}

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

Если мы удалим CSS для will-change: transform или position: sticky, это решит проблему.

Поэтому у меня есть подозрение, что это проблема браузера и, в частности, проблема, связанная с тем, как Chrome отображает их в стековом контексте или композитном слое. Это происходит, когда используется позиция sticky и когда will-change настроен на преобразование.

Я не могу найти какую-либо информацию по такой проблеме, потому что наш сценарий использования немного специфичен для нас, но необходим (производительность).

Любые идеи о том, что проблема может быть?

0 ответов

Другие вопросы по тегам