Липкое поведение заголовка таблицы на мобильном Chrome - PullRequest
Новая
       32

Липкое поведение заголовка таблицы на мобильном Chrome

0 голосов
/ 25 января 2019

Я пытаюсь использовать position:sticky на моих thead th с. На десктопе он работает нормально, но на мобильном Chrome (как с помощью симулятора устройств Chrome Developer Tools, так и Chrome на моем телефоне Android) он работает странно. (Симулятор устройства Firefox работает.) В частности:

  1. При прокрутке заголовков прокручивайте страницу и не становитесь липкими
  2. При прокрутке снизу заголовки отображаются не сразу. Однако, как только вы попадаете на определенное расстояние от вершины, заголовки появляются и ведут себя липко, пока не дойдете до вершины, где они снова станут частью страницы, как и ожидалось.
  3. Если вы начнете прокручиваться вниз, даже когда они все еще находятся в «фиксированном» режиме (в # 2), они исчезают сверху со всем остальным, как будто они больше не исправлены.

Я свернул свою страницу до довольно общей страницы с таблицей со структурой thead>tr>th и tbody>tr>td, с достаточным количеством столбцов для горизонтальной прокрутки и обычным CSS, примененным к th s.

Действительно, если я уберу достаточно столбцов, чтобы они уместились по горизонтали, это сработает.

Страница использует загрузчик 3.4, но удаление его, похоже, не меняет поведение.

Добавление div.table-отзывчивого вокруг него не помогло.

Это ошибка в Chrome?

Есть ли способ заставить его работать без удаления столбцов?

Полный свернутый пример приведен ниже и доступен в виде кодового пера на https://codepen.io/nafg/pen/ErVEEK. Используйте представление «режим отладки» codepen (доступно при входе в систему, возможно, придется его разветвить), чтобы просмотреть его отдельно для воспроизведения (или просто скопировать в новый файл .html). (Codepen «Полный просмотр страницы» и опция «полная страница» SO [доступны после запуска фрагмента] используют iframe и не отображают проблему.

Спасибо. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta content="text/html; charset=UTF-8" http-equiv="content-type">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style type="text/css">
    th {
      position: sticky;
      top: 0;
      background: white;
    }
  </style>
  <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap@3.4.0/dist/css/bootstrap.css">
  <title></title>
</head>
<body>
<div>
  <table class="table">
    <thead>
    <tr>
      <th></th>
      <th class="last-name"><a href="#">Last</a></th>
      <th class="first-name"><a href="#">First</a></th>
      <th class="gender"><a href="#">Gender</a></th>
      <th class="home"><a href="#">Home</a></th>
      <th class="cell"><a href="#">Cell</a></th>
      <th class="email"><a href="#">Email</a></th>
      <th class="address"><a href="#">Address</a></th>
      <th class="area"><a href="#">Area</a></th>
      <th class="city"><a href="#">City</a></th>
      <th class="state"><a href="#">State</a></th>
      <th class="zip"><a href="#">Zip</a></th>
      <th class="modified"><a href="#">Modified</a></th>
      <th class="created"><a href="#">Created</a></th>
      <th></th>
    </tr>
    </thead>
    <tbody>
    <tr><td>9999</td><td>Smith</td><td>John</td><td>M</td><td>888-555-1212</td><td>800-555-1212</td><td>john@example.com</td><td>123 Main St.</td><td>Main</td><td>New York</td><td>NY</td><td>99999</td><td>1/1/01, 12:00 AM</td><td>1/1/01, 12:00 AM</td><td><a href="#" class="view">View</a></td></tr>
    <tr><td>9999</td><td>Smith</td><td>John</td><td>M</td><td>888-555-1212</td><td>800-555-1212</td><td>john@example.com</td><td>123 Main St.</td><td>Main</td><td>New York</td><td>NY</td><td>99999</td><td>1/1/01, 12:00 AM</td><td>1/1/01, 12:00 AM</td><td><a href="#" class="view">View</a></td></tr>
    <tr><td>9999</td><td>Smith</td><td>John</td><td>M</td><td>888-555-1212</td><td>800-555-1212</td><td>john@example.com</td><td>123 Main St.</td><td>Main</td><td>New York</td><td>NY</td><td>99999</td><td>1/1/01, 12:00 AM</td><td>1/1/01, 12:00 AM</td><td><a href="#" class="view">View</a></td></tr>
    <tr><td>9999</td><td>Smith</td><td>John</td><td>M</td><td>888-555-1212</td><td>800-555-1212</td><td>john@example.com</td><td>123 Main St.</td><td>Main</td><td>New York</td><td>NY</td><td>99999</td><td>1/1/01, 12:00 AM</td><td>1/1/01, 12:00 AM</td><td><a href="#" class="view">View</a></td></tr>
    <tr><td>9999</td><td>Smith</td><td>John</td><td>M</td><td>888-555-1212</td><td>800-555-1212</td><td>john@example.com</td><td>123 Main St.</td><td>Main</td><td>New York</td><td>NY</td><td>99999</td><td>1/1/01, 12:00 AM</td><td>1/1/01, 12:00 AM</td><td><a href="#" class="view">View</a></td></tr>
    <tr><td>9999</td><td>Smith</td><td>John</td><td>M</td><td>888-555-1212</td><td>800-555-1212</td><td>john@example.com</td><td>123 Main St.</td><td>Main</td><td>New York</td><td>NY</td><td>99999</td><td>1/1/01, 12:00 AM</td><td>1/1/01, 12:00 AM</td><td><a href="#" class="view">View</a></td></tr>
    <tr><td>9999</td><td>Smith</td><td>John</td><td>M</td><td>888-555-1212</td><td>800-555-1212</td><td>john@example.com</td><td>123 Main St.</td><td>Main</td><td>New York</td><td>NY</td><td>99999</td><td>1/1/01, 12:00 AM</td><td>1/1/01, 12:00 AM</td><td><a href="#" class="view">View</a></td></tr>
    <tr><td>9999</td><td>Smith</td><td>John</td><td>M</td><td>888-555-1212</td><td>800-555-1212</td><td>john@example.com</td><td>123 Main St.</td><td>Main</td><td>New York</td><td>NY</td><td>99999</td><td>1/1/01, 12:00 AM</td><td>1/1/01, 12:00 AM</td><td><a href="#" class="view">View</a></td></tr>
    <tr><td>9999</td><td>Smith</td><td>John</td><td>M</td><td>888-555-1212</td><td>800-555-1212</td><td>john@example.com</td><td>123 Main St.</td><td>Main</td><td>New York</td><td>NY</td><td>99999</td><td>1/1/01, 12:00 AM</td><td>1/1/01, 12:00 AM</td><td><a href="#" class="view">View</a></td></tr>
    <tr><td>9999</td><td>Smith</td><td>John</td><td>M</td><td>888-555-1212</td><td>800-555-1212</td><td>john@example.com</td><td>123 Main St.</td><td>Main</td><td>New York</td><td>NY</td><td>99999</td><td>1/1/01, 12:00 AM</td><td>1/1/01, 12:00 AM</td><td><a href="#" class="view">View</a></td></tr>
    <tr><td>9999</td><td>Smith</td><td>John</td><td>M</td><td>888-555-1212</td><td>800-555-1212</td><td>john@example.com</td><td>123 Main St.</td><td>Main</td><td>New York</td><td>NY</td><td>99999</td><td>1/1/01, 12:00 AM</td><td>1/1/01, 12:00 AM</td><td><a href="#" class="view">View</a></td></tr>
    <tr><td>9999</td><td>Smith</td><td>John</td><td>M</td><td>888-555-1212</td><td>800-555-1212</td><td>john@example.com</td><td>123 Main St.</td><td>Main</td><td>New York</td><td>NY</td><td>99999</td><td>1/1/01, 12:00 AM</td><td>1/1/01, 12:00 AM</td><td><a href="#" class="view">View</a></td></tr>
    <tr><td>9999</td><td>Smith</td><td>John</td><td>M</td><td>888-555-1212</td><td>800-555-1212</td><td>john@example.com</td><td>123 Main St.</td><td>Main</td><td>New York</td><td>NY</td><td>99999</td><td>1/1/01, 12:00 AM</td><td>1/1/01, 12:00 AM</td><td><a href="#" class="view">View</a></td></tr>
    <tr><td>9999</td><td>Smith</td><td>John</td><td>M</td><td>888-555-1212</td><td>800-555-1212</td><td>john@example.com</td><td>123 Main St.</td><td>Main</td><td>New York</td><td>NY</td><td>99999</td><td>1/1/01, 12:00 AM</td><td>1/1/01, 12:00 AM</td><td><a href="#" class="view">View</a></td></tr>
    <tr><td>9999</td><td>Smith</td><td>John</td><td>M</td><td>888-555-1212</td><td>800-555-1212</td><td>john@example.com</td><td>123 Main St.</td><td>Main</td><td>New York</td><td>NY</td><td>99999</td><td>1/1/01, 12:00 AM</td><td>1/1/01, 12:00 AM</td><td><a href="#" class="view">View</a></td></tr>
    <tr><td>9999</td><td>Smith</td><td>John</td><td>M</td><td>888-555-1212</td><td>800-555-1212</td><td>john@example.com</td><td>123 Main St.</td><td>Main</td><td>New York</td><td>NY</td><td>99999</td><td>1/1/01, 12:00 AM</td><td>1/1/01, 12:00 AM</td><td><a href="#" class="view">View</a></td></tr>
    <tr><td>9999</td><td>Smith</td><td>John</td><td>M</td><td>888-555-1212</td><td>800-555-1212</td><td>john@example.com</td><td>123 Main St.</td><td>Main</td><td>New York</td><td>NY</td><td>99999</td><td>1/1/01, 12:00 AM</td><td>1/1/01, 12:00 AM</td><td><a href="#" class="view">View</a></td></tr>
    <tr><td>9999</td><td>Smith</td><td>John</td><td>M</td><td>888-555-1212</td><td>800-555-1212</td><td>john@example.com</td><td>123 Main St.</td><td>Main</td><td>New York</td><td>NY</td><td>99999</td><td>1/1/01, 12:00 AM</td><td>1/1/01, 12:00 AM</td><td><a href="#" class="view">View</a></td></tr>
    <tr><td>9999</td><td>Smith</td><td>John</td><td>M</td><td>888-555-1212</td><td>800-555-1212</td><td>john@example.com</td><td>123 Main St.</td><td>Main</td><td>New York</td><td>NY</td><td>99999</td><td>1/1/01, 12:00 AM</td><td>1/1/01, 12:00 AM</td><td><a href="#" class="view">View</a></td></tr>
    <tr><td>9999</td><td>Smith</td><td>John</td><td>M</td><td>888-555-1212</td><td>800-555-1212</td><td>john@example.com</td><td>123 Main St.</td><td>Main</td><td>New York</td><td>NY</td><td>99999</td><td>1/1/01, 12:00 AM</td><td>1/1/01, 12:00 AM</td><td><a href="#" class="view">View</a></td></tr>
    <tr><td>9999</td><td>Smith</td><td>John</td><td>M</td><td>888-555-1212</td><td>800-555-1212</td><td>john@example.com</td><td>123 Main St.</td><td>Main</td><td>New York</td><td>NY</td><td>99999</td><td>1/1/01, 12:00 AM</td><td>1/1/01, 12:00 AM</td><td><a href="#" class="view">View</a></td></tr>
    <tr><td>9999</td><td>Smith</td><td>John</td><td>M</td><td>888-555-1212</td><td>800-555-1212</td><td>john@example.com</td><td>123 Main St.</td><td>Main</td><td>New York</td><td>NY</td><td>99999</td><td>1/1/01, 12:00 AM</td><td>1/1/01, 12:00 AM</td><td><a href="#" class="view">View</a></td></tr>
    <tr><td>9999</td><td>Smith</td><td>John</td><td>M</td><td>888-555-1212</td><td>800-555-1212</td><td>john@example.com</td><td>123 Main St.</td><td>Main</td><td>New York</td><td>NY</td><td>99999</td><td>1/1/01, 12:00 AM</td><td>1/1/01, 12:00 AM</td><td><a href="#" class="view">View</a></td></tr>
    <tr><td>9999</td><td>Smith</td><td>John</td><td>M</td><td>888-555-1212</td><td>800-555-1212</td><td>john@example.com</td><td>123 Main St.</td><td>Main</td><td>New York</td><td>NY</td><td>99999</td><td>1/1/01, 12:00 AM</td><td>1/1/01, 12:00 AM</td><td><a href="#" class="view">View</a></td></tr>
    <tr><td>9999</td><td>Smith</td><td>John</td><td>M</td><td>888-555-1212</td><td>800-555-1212</td><td>john@example.com</td><td>123 Main St.</td><td>Main</td><td>New York</td><td>NY</td><td>99999</td><td>1/1/01, 12:00 AM</td><td>1/1/01, 12:00 AM</td><td><a href="#" class="view">View</a></td></tr>
    <tr><td>9999</td><td>Smith</td><td>John</td><td>M</td><td>888-555-1212</td><td>800-555-1212</td><td>john@example.com</td><td>123 Main St.</td><td>Main</td><td>New York</td><td>NY</td><td>99999</td><td>1/1/01, 12:00 AM</td><td>1/1/01, 12:00 AM</td><td><a href="#" class="view">View</a></td></tr>
    <tr><td>9999</td><td>Smith</td><td>John</td><td>M</td><td>888-555-1212</td><td>800-555-1212</td><td>john@example.com</td><td>123 Main St.</td><td>Main</td><td>New York</td><td>NY</td><td>99999</td><td>1/1/01, 12:00 AM</td><td>1/1/01, 12:00 AM</td><td><a href="#" class="view">View</a></td></tr>
    <tr><td>9999</td><td>Smith</td><td>John</td><td>M</td><td>888-555-1212</td><td>800-555-1212</td><td>john@example.com</td><td>123 Main St.</td><td>Main</td><td>New York</td><td>NY</td><td>99999</td><td>1/1/01, 12:00 AM</td><td>1/1/01, 12:00 AM</td><td><a href="#" class="view">View</a></td></tr>
    <tr><td>9999</td><td>Smith</td><td>John</td><td>M</td><td>888-555-1212</td><td>800-555-1212</td><td>john@example.com</td><td>123 Main St.</td><td>Main</td><td>New York</td><td>NY</td><td>99999</td><td>1/1/01, 12:00 AM</td><td>1/1/01, 12:00 AM</td><td><a href="#" class="view">View</a></td></tr>
    <tr><td>9999</td><td>Smith</td><td>John</td><td>M</td><td>888-555-1212</td><td>800-555-1212</td><td>john@example.com</td><td>123 Main St.</td><td>Main</td><td>New York</td><td>NY</td><td>99999</td><td>1/1/01, 12:00 AM</td><td>1/1/01, 12:00 AM</td><td><a href="#" class="view">View</a></td></tr>
    <tr><td>9999</td><td>Smith</td><td>John</td><td>M</td><td>888-555-1212</td><td>800-555-1212</td><td>john@example.com</td><td>123 Main St.</td><td>Main</td><td>New York</td><td>NY</td><td>99999</td><td>1/1/01, 12:00 AM</td><td>1/1/01, 12:00 AM</td><td><a href="#" class="view">View</a></td></tr>
    <tr><td>9999</td><td>Smith</td><td>John</td><td>M</td><td>888-555-1212</td><td>800-555-1212</td><td>john@example.com</td><td>123 Main St.</td><td>Main</td><td>New York</td><td>NY</td><td>99999</td><td>1/1/01, 12:00 AM</td><td>1/1/01, 12:00 AM</td><td><a href="#" class="view">View</a></td></tr>
    <tr><td>9999</td><td>Smith</td><td>John</td><td>M</td><td>888-555-1212</td><td>800-555-1212</td><td>john@example.com</td><td>123 Main St.</td><td>Main</td><td>New York</td><td>NY</td><td>99999</td><td>1/1/01, 12:00 AM</td><td>1/1/01, 12:00 AM</td><td><a href="#" class="view">View</a></td></tr>
    <tr><td>9999</td><td>Smith</td><td>John</td><td>M</td><td>888-555-1212</td><td>800-555-1212</td><td>john@example.com</td><td>123 Main St.</td><td>Main</td><td>New York</td><td>NY</td><td>99999</td><td>1/1/01, 12:00 AM</td><td>1/1/01, 12:00 AM</td><td><a href="#" class="view">View</a></td></tr>
    <tr><td>9999</td><td>Smith</td><td>John</td><td>M</td><td>888-555-1212</td><td>800-555-1212</td><td>john@example.com</td><td>123 Main St.</td><td>Main</td><td>New York</td><td>NY</td><td>99999</td><td>1/1/01, 12:00 AM</td><td>1/1/01, 12:00 AM</td><td><a href="#" class="view">View</a></td></tr>
    <tr><td>9999</td><td>Smith</td><td>John</td><td>M</td><td>888-555-1212</td><td>800-555-1212</td><td>john@example.com</td><td>123 Main St.</td><td>Main</td><td>New York</td><td>NY</td><td>99999</td><td>1/1/01, 12:00 AM</td><td>1/1/01, 12:00 AM</td><td><a href="#" class="view">View</a></td></tr>
    <tr><td>9999</td><td>Smith</td><td>John</td><td>M</td><td>888-555-1212</td><td>800-555-1212</td><td>john@example.com</td><td>123 Main St.</td><td>Main</td><td>New York</td><td>NY</td><td>99999</td><td>1/1/01, 12:00 AM</td><td>1/1/01, 12:00 AM</td><td><a href="#" class="view">View</a></td></tr>
    <tr><td>9999</td><td>Smith</td><td>John</td><td>M</td><td>888-555-1212</td><td>800-555-1212</td><td>john@example.com</td><td>123 Main St.</td><td>Main</td><td>New York</td><td>NY</td><td>99999</td><td>1/1/01, 12:00 AM</td><td>1/1/01, 12:00 AM</td><td><a href="#" class="view">View</a></td></tr>
    <tr><td>9999</td><td>Smith</td><td>John</td><td>M</td><td>888-555-1212</td><td>800-555-1212</td><td>john@example.com</td><td>123 Main St.</td><td>Main</td><td>New York</td><td>NY</td><td>99999</td><td>1/1/01, 12:00 AM</td><td>1/1/01, 12:00 AM</td><td><a href="#" class="view">View</a></td></tr>
    <tr><td>9999</td><td>Smith</td><td>John</td><td>M</td><td>888-555-1212</td><td>800-555-1212</td><td>john@example.com</td><td>123 Main St.</td><td>Main</td><td>New York</td><td>NY</td><td>99999</td><td>1/1/01, 12:00 AM</td><td>1/1/01, 12:00 AM</td><td><a href="#" class="view">View</a></td></tr>
    </tbody>
  </table>
</div>
Test
</body>
</html>
...