Позиционирование 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 настроен на преобразование.
Я не могу найти какую-либо информацию по такой проблеме, потому что наш сценарий использования немного специфичен для нас, но необходим (производительность).
Любые идеи о том, что проблема может быть?