Стол липких столбцов прокручивает ошибку Chrome

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

Это часть сложного datatable, поэтому мне трудно воссоздать jsfiddle, но здесь ссылка: http://rateshopper.error404.ro/table.html

Проблема заключается в том, что вы просто играете с прокруткой, а затем перемещаете курсор влево. Фиксированные столбцы когда-то просто выпрыгивают из положения. Устранение и повторная проверка маржи, оставленной в инспекторе, фиксирует ее. Я не знаю, почему это происходит.

Здесь видео в Chrome: http://rateshopper.error404.ro/bug_chrome.mov

Любые идеи или помощь будут очень благодарны!

Ответ 1

Edit:

Лучшее исправление:

.col-lg-10 {
    float: right;
}

Установка поплавка в родительском элементе #seriesTableWrapper предотвращает сбой краха на нем на дочерних элементах.

Здесь необходимо прочитать о развале маржи: http://www.seifi.org/css/understanding-taming-collapsing-margins-in-css.html

Статья немного устарела с точки зрения методов предотвращения краха, но объясняет, почему и как это происходит.

Более современные способы предотвращения краха: Как отключить смену маржи?

Найдено исправление

Изменить:

#seriesTableWrapper {
    margin-left: *something*;
}

#seriesTableWrapper {
    padding-left: *something*;
}

Вероятно, проблема с разрывом маржи, в некоторых случаях поля могут рухнуть. К сожалению, полоса прокрутки простирается теперь по всей ширине.

Поскольку нет вертикальной прокрутки, вы могли бы просто создать таблицу без прокрутки и таблицу с горизонтальной прокруткой рядом с ней. И если есть вертикальная прокрутка, вы можете обернуть обе эти таблицы в div с переполнением: auto;

Ответ 2

Я смог воспроизвести внешний вид, который вы показываете выше, дико изменяя размер окна. Я подозреваю, что при изменении размера, которое вы используете, чтобы установить начальное левое поле, возвращается значение null. Установка минимального значения для левого поля, скорее всего, решит эту проблему. Если вы можете предоставить javascript, который вычисляет и применяет эти позиции, я с радостью помогу вам в его редактировании.

Ответ 3

Ну, это прекрасно работает на моем конце. Это похоже на то, чтобы нормально работать на компьютерах других людей, но, похоже, это происходит только на одном конкретном macbook, хотя это будет MacBook, на котором вы его создали, я полагаю...

Если это так, вам нужно стереть кеш браузера, хотя он, скорее всего, локальный, он все еще хранит кеш. Попробуйте это...

Откройте Chrome. На панели инструментов браузера нажмите значок 3 точки. Нажмите "История", а затем нажмите "Очистить данные просмотра". В разделе "Очистить данные просмотра" установите флажки для "Файлы cookie и данных сайта" и "Кэшированные изображения и файлы". Используйте меню вверху, чтобы выбрать объем данных, который вы хотите удалить.... Нажмите Очистить данные просмотра.

Попробуйте и очистите "ВСЕ", у меня были схожие проблемы с этим до разработки, и это из-за того, что я нашел кеш, я не знаю, решит ли это вашу проблему, но я думаю, что это будет первое место. смотреть.

Просто прочитайте последний комментарий о том, что это ваши клиенты Mac, я бы порекомендовал вычистить кеш и проверить расширения, которые у него могут быть, как было предложено в последнем комментарии