Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Safari + viewport + Twitter Bootstrap 2 CSS = truncated header #117

Closed
saintger opened this issue Sep 26, 2014 · 13 comments
Closed

Safari + viewport + Twitter Bootstrap 2 CSS = truncated header #117

saintger opened this issue Sep 26, 2014 · 13 comments
Labels
duplicate

Comments

@saintger
Copy link

Hello,

I found a strange bug which only occurs when you use Safari + the meta tag "viewport" and Twitter Bootstrap 2 CSS: the header which is supposed to scroll is truncated.

For instance if you start with 3 colums visible on your iPhone out of 10 colums availables:

  • if you scroll down, the 3 column titles will correctly stick to the top
  • if you scroll right, the 7 columns titles won't appear and you see only the 3 initial column titles scrolling away.

Removing the <meta name="viewport" content="width=device-width, initial-scale=1.0"> or removing Twitter Bootstrap CSS make the problem disappear.

Confirmed on iPhone 4S, iPhone emulator and Mac Mini.

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>floatThead bug</title>
  <script type='text/javascript' src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
  <script type='text/javascript' src="https://rawgithub.com/mkoryak/floatThead/master/dist/jquery.floatThead.min.js"></script>
  <link rel="stylesheet" type="text/css" href="http://www.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css" />
  <style type='text/css'>
    .table th {
      background-color: #fff;
    }
  </style>

  <script type='text/javascript'>
    $(window).load(function(){
      $(function(){
        $('.table').floatThead();
      });
    });
  </script>
</head>

<body>
  <table class="table">
    <thead>
        <tr>
            <th>Type</th>
            <th>Method</th>
            <th>Crop</th>
            <th>Sow Direct</th>
            <th>Sow Transplant</th>
            <th>Transplant</th>
            <th>Begin Harvest</th>
            <th>End Harvest</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>Spring</th>
            <td class="transplant">Transplant</td>
            <td>Artichoke</td>
            <td class="directsow"></td>
            <td class="transplant">03/31/2014</td>
            <td class="transplant">05/26/2014</td>
            <td class="harvest">08/14/2014</td>
            <td class="harvest">09/03/2014</td>
        </tr>
        <tr>
            <th>Spring</th>
            <td class="transplant">Transplant</td>
            <td>Asparagus</td>
            <td class="directsow"></td>
            <td class="transplant">04/28/2014</td>
            <td class="transplant">04/28/2014</td>
            <td class="harvest">06/12/2014</td>
            <td class="harvest">07/12/2014</td>
        </tr>
        <tr>
            <th>Spring</th>
            <td class="transplant">Transplant</td>
            <td>Basil</td>
            <td class="directsow"></td>
            <td class="transplant">04/14/2014</td>
            <td class="transplant">05/26/2014</td>
            <td class="harvest">05/26/2014</td>
            <td class="harvest">05/26/2014</td>
        </tr>
        <tr>
            <th>Spring</th>
            <td class="directsow">Direct Sow</td>
            <td>Beans (Bush)</td>
            <td class="directsow">05/19/2014</td>
            <td class="transplant"></td>
            <td class="transplant"></td>
            <td class="harvest">07/03/2014</td>
            <td class="harvest">07/13/2014</td>
        </tr>
        <tr>
            <th>Spring</th>
            <td class="directsow">Direct Sow</td>
            <td>Beans (Pole)</td>
            <td class="directsow">05/19/2014</td>
            <td class="transplant"></td>
            <td class="transplant"></td>
            <td class="harvest">07/18/2014</td>
            <td class="harvest">07/28/2014</td>
        </tr>
        <tr>
            <th>Spring</th>
            <td class="directsow">Direct Sow</td>
            <td>Beets</td>
            <td class="directsow">04/28/2014</td>
            <td class="transplant"></td>
            <td class="transplant"></td>
            <td class="harvest">06/27/2014</td>
            <td class="harvest">07/07/2014</td>
        </tr>
        <tr>
            <th>Spring</th>
            <td class="transplant">Transplant</td>
            <td>Broccoli</td>
            <td class="directsow"></td>
            <td class="transplant">03/10/2014</td>
            <td class="transplant">05/05/2014</td>
            <td class="harvest">07/14/2014</td>
            <td class="harvest">07/14/2014</td>
        </tr>
        <tr>
            <th>Spring</th>
            <td class="transplant">Transplant</td>
            <td>Brussels Sprouts</td>
            <td class="directsow"></td>
            <td class="transplant">03/10/2014</td>
            <td class="transplant">05/05/2014</td>
            <td class="harvest">08/03/2014</td>
            <td class="harvest">08/13/2014</td>
        </tr>
        <tr>
            <th>Spring</th>
            <td class="transplant">Transplant</td>
            <td>Cabbage</td>
            <td class="directsow"></td>
            <td class="transplant">03/03/2014</td>
            <td class="transplant">04/28/2014</td>
            <td class="harvest">06/27/2014</td>
            <td class="harvest">07/07/2014</td>
        </tr>
        <tr>
            <th>Spring</th>
            <td class="transplant">Transplant</td>
            <td>Cantaloupe</td>
            <td class="directsow"></td>
            <td class="transplant">04/14/2014</td>
            <td class="transplant">05/12/2014</td>
            <td class="harvest">08/05/2014</td>
            <td class="harvest">09/04/2014</td>
        </tr>
        <tr>
            <th>Spring</th>
            <td class="directsow">Direct Sow</td>
            <td>Carrot</td>
            <td class="directsow">04/28/2014</td>
            <td class="transplant"></td>
            <td class="transplant"></td>
            <td class="harvest">07/02/2014</td>
            <td class="harvest">07/12/2014</td>
        </tr>
        <tr>
            <th>Spring</th>
            <td class="transplant">Transplant</td>
            <td>Cauliflower</td>
            <td class="directsow"></td>
            <td class="transplant">03/10/2014</td>
            <td class="transplant">05/05/2014</td>
            <td class="harvest">06/24/2014</td>
            <td class="harvest">07/04/2014</td>
        </tr>
        <tr>
            <th>Spring</th>
            <td class="transplant">Transplant</td>
            <td>Celery</td>
            <td class="directsow"></td>
            <td class="transplant">02/24/2014</td>
            <td class="transplant">05/12/2014</td>
            <td class="harvest">08/05/2014</td>
            <td class="harvest">08/25/2014</td>
        </tr>
        <tr>
            <th>Spring</th>
            <td class="directsow">Direct Sow</td>
            <td>Chard</td>
            <td class="directsow">04/28/2014</td>
            <td class="transplant"></td>
            <td class="transplant"></td>
            <td class="harvest">06/12/2014</td>
            <td class="harvest">06/22/2014</td>
        </tr>
        <tr>
            <th>Spring</th>
            <td class="transplant">Transplant</td>
            <td>Chinese Cabbage</td>
            <td class="directsow"></td>
            <td class="transplant">04/07/2014</td>
            <td class="transplant">05/05/2014</td>
            <td class="harvest">07/14/2014</td>
            <td class="harvest">07/14/2014</td>
        </tr>
        <tr>
            <td>Fall</td>
            <td class="directsow">Direct Sow</td>
            <td>Chinese Cabbage</td>
            <td class="directsow">06/24/2014</td>
            <td class="transplant"></td>
            <td class="transplant"></td>
            <td class="harvest">09/02/2014</td>
            <td class="harvest">09/02/2014</td>
        </tr>
        <tr>
            <th>Spring</th>
            <td class="directsow">Direct Sow</td>
            <td>Chives</td>
            <td class="directsow">05/19/2014</td>
            <td class="transplant"></td>
            <td class="transplant"></td>
            <td class="harvest">05/19/2014</td>
            <td class="harvest">05/19/2014</td>
        </tr>
        <tr>
            <th>Spring</th>
            <td class="directsow">Direct Sow</td>
            <td>Corn (Sweet)</td>
            <td class="directsow">05/19/2014</td>
            <td class="transplant"></td>
            <td class="transplant"></td>
            <td class="harvest">07/18/2014</td>
            <td class="harvest">08/07/2014</td>
        </tr>
        <tr>
            <th>Spring</th>
            <td class="transplant">Transplant</td>
            <td>Cucumber</td>
            <td class="directsow"></td>
            <td class="transplant">04/21/2014</td>
            <td class="transplant">05/19/2014</td>
            <td class="harvest">07/08/2014</td>
            <td class="harvest">07/18/2014</td>
        </tr>
        <tr>
            <th>Spring</th>
            <td class="transplant">Transplant</td>
            <td>Eggplant</td>
            <td class="directsow"></td>
            <td class="transplant">03/10/2014</td>
            <td class="transplant">05/19/2014</td>
            <td class="harvest">07/18/2014</td>
            <td class="harvest">08/07/2014</td>
        </tr>
        <tr>
            <th>Spring</th>
            <td class="directsow">Direct Sow</td>
            <td>Endive</td>
            <td class="directsow">04/28/2014</td>
            <td class="transplant"></td>
            <td class="transplant"></td>
            <td class="harvest">07/02/2014</td>
            <td class="harvest">07/02/2014</td>
        </tr>
        <tr>
            <td>Fall</td>
            <td class="transplant">Transplant</td>
            <td>Garlic</td>
            <td class="directsow"></td>
            <td class="transplant">09/23/2014</td>
            <td class="transplant">09/23/2014</td>
            <td class="harvest">07/15/2015</td>
            <td class="harvest">08/14/2015</td>
        </tr>
        <tr>
            <th>Spring</th>
            <td class="transplant">Transplant</td>
            <td>Horseradish</td>
            <td class="directsow"></td>
            <td class="transplant">04/28/2014</td>
            <td class="transplant">04/28/2014</td>
            <td class="harvest">10/05/2014</td>
            <td class="harvest">11/04/2014</td>
        </tr>
        <tr>
            <th>Spring</th>
            <td class="transplant">Transplant</td>
            <td>Jerusalem Artichoke</td>
            <td class="directsow"></td>
            <td class="transplant">05/19/2014</td>
            <td class="transplant">05/19/2014</td>
            <td class="harvest">04/15/2015</td>
            <td class="harvest">05/13/2015</td>
        </tr>
        <tr>
            <th>Spring</th>
            <td class="directsow">Direct Sow</td>
            <td>Kale</td>
            <td class="directsow">04/28/2014</td>
            <td class="transplant"></td>
            <td class="transplant"></td>
            <td class="harvest">06/17/2014</td>
            <td class="harvest">06/27/2014</td>
        </tr>
        <tr>
            <td>Fall</td>
            <td class="directsow">Direct Sow</td>
            <td>Kale</td>
            <td class="directsow">07/15/2014</td>
            <td class="transplant"></td>
            <td class="transplant"></td>
            <td class="harvest">09/03/2014</td>
            <td class="harvest">09/13/2014</td>
        </tr>
        <tr>
            <th>Spring</th>
            <td class="directsow">Direct Sow</td>
            <td>Kohlrabi</td>
            <td class="directsow">05/05/2014</td>
            <td class="transplant"></td>
            <td class="transplant"></td>
            <td class="harvest">06/29/2014</td>
            <td class="harvest">06/29/2014</td>
        </tr>
        <tr>
            <td>Fall</td>
            <td class="directsow">Direct Sow</td>
            <td>Kohlrabi</td>
            <td class="directsow">07/01/2014</td>
            <td class="transplant"></td>
            <td class="transplant"></td>
            <td class="harvest">08/25/2014</td>
            <td class="harvest">08/25/2014</td>
        </tr>
        <tr>
            <th>Spring</th>
            <td class="directsow">Direct Sow</td>
            <td>Lettuce (Head)</td>
            <td class="directsow">04/28/2014</td>
            <td class="transplant"></td>
            <td class="transplant"></td>
            <td class="harvest">07/07/2014</td>
            <td class="harvest">07/17/2014</td>
        </tr>
        <tr>
            <th>Spring</th>
            <td class="transplant">Transplant</td>
            <td>Lettuce (Head)</td>
            <td class="directsow"></td>
            <td class="transplant">04/21/2014</td>
            <td class="transplant">05/19/2014</td>
            <td class="harvest">07/28/2014</td>
            <td class="harvest">08/07/2014</td>
        </tr>
        <tr>
            <th>Spring</th>
            <td class="directsow">Direct Sow</td>
            <td>Lettuce (Leaf)</td>
            <td class="directsow">04/28/2014</td>
            <td class="transplant"></td>
            <td class="transplant"></td>
            <td class="harvest">06/07/2014</td>
            <td class="harvest">06/17/2014</td>
        </tr>
        <tr>
            <th>Spring</th>
            <td class="transplant">Transplant</td>
            <td>Lettuce (Leaf)</td>
            <td class="directsow"></td>
            <td class="transplant">04/21/2014</td>
            <td class="transplant">05/19/2014</td>
            <td class="harvest">06/28/2014</td>
            <td class="harvest">07/08/2014</td>
        </tr>
        <tr>
            <td>Fall</td>
            <td class="directsow">Direct Sow</td>
            <td>Lettuce (Leaf)</td>
            <td class="directsow">07/29/2014</td>
            <td class="transplant"></td>
            <td class="transplant"></td>
            <td class="harvest">09/07/2014</td>
            <td class="harvest">09/17/2014</td>
        </tr>
        <tr>
            <th>Spring</th>
            <td class="directsow">Direct Sow</td>
            <td>Okra</td>
            <td class="directsow">05/19/2014</td>
            <td class="transplant"></td>
            <td class="transplant"></td>
            <td class="harvest">07/13/2014</td>
            <td class="harvest">07/23/2014</td>
        </tr>
        <tr>
            <th>Spring</th>
            <td class="directsow">Direct Sow</td>
            <td>Onion (Bulb)</td>
            <td class="directsow">05/19/2014</td>
            <td class="transplant"></td>
            <td class="transplant"></td>
            <td class="harvest">08/27/2014</td>
            <td class="harvest">08/27/2014</td>
        </tr>
        <tr>
            <th>Spring</th>
            <td class="transplant">Transplant</td>
            <td>Onion (Bulb)</td>
            <td class="directsow"></td>
            <td class="transplant">03/03/2014</td>
            <td class="transplant">04/28/2014</td>
            <td class="harvest">08/06/2014</td>
            <td class="harvest">08/06/2014</td>
        </tr>
        <tr>
            <th>Spring</th>
            <td class="directsow">Direct Sow</td>
            <td>Onion (Bunching)</td>
            <td class="directsow">04/28/2014</td>
            <td class="transplant"></td>
            <td class="transplant"></td>
            <td class="harvest">06/27/2014</td>
            <td class="harvest">07/17/2014</td>
        </tr>
        <tr>
            <th>Spring</th>
            <td class="directsow">Direct Sow</td>
            <td>Parsley</td>
            <td class="directsow">05/05/2014</td>
            <td class="transplant"></td>
            <td class="transplant"></td>
            <td class="harvest">07/14/2014</td>
            <td class="harvest">07/14/2014</td>
        </tr>
        <tr>
            <th>Spring</th>
            <td class="transplant">Transplant</td>
            <td>Parsley</td>
            <td class="directsow"></td>
            <td class="transplant">03/24/2014</td>
            <td class="transplant">05/19/2014</td>
            <td class="harvest">07/28/2014</td>
            <td class="harvest">07/28/2014</td>
        </tr>
        <tr>
            <th>Spring</th>
            <td class="directsow">Direct Sow</td>
            <td>Parsnip</td>
            <td class="directsow">04/28/2014</td>
            <td class="transplant"></td>
            <td class="transplant"></td>
            <td class="harvest">07/17/2014</td>
            <td class="harvest">08/26/2014</td>
        </tr>
        <tr>
            <th>Spring</th>
            <td class="directsow">Direct Sow</td>
            <td>Peas (Fresh)</td>
            <td class="directsow">04/28/2014</td>
            <td class="transplant"></td>
            <td class="transplant"></td>
            <td class="harvest">06/22/2014</td>
            <td class="harvest">07/02/2014</td>
        </tr>
        <tr>
            <td>Fall</td>
            <td class="directsow">Direct Sow</td>
            <td>Peas (Fresh)</td>
            <td class="directsow">06/17/2014</td>
            <td class="transplant"></td>
            <td class="transplant"></td>
            <td class="harvest">08/11/2014</td>
            <td class="harvest">08/21/2014</td>
        </tr>
        <tr>
            <th>Spring</th>
            <td class="transplant">Transplant</td>
            <td>Pepper</td>
            <td class="directsow"></td>
            <td class="transplant">03/10/2014</td>
            <td class="transplant">05/19/2014</td>
            <td class="harvest">07/28/2014</td>
            <td class="harvest">08/07/2014</td>
        </tr>
        <tr>
            <th>Spring</th>
            <td class="transplant">Transplant</td>
            <td>Potato</td>
            <td class="directsow"></td>
            <td class="transplant">05/12/2014</td>
            <td class="transplant">05/12/2014</td>
            <td class="harvest">07/31/2014</td>
            <td class="harvest">09/09/2014</td>
        </tr>
        <tr>
            <th>Spring</th>
            <td class="directsow">Direct Sow</td>
            <td>Pumpkin</td>
            <td class="directsow">05/19/2014</td>
            <td class="transplant"></td>
            <td class="transplant"></td>
            <td class="harvest">08/27/2014</td>
            <td class="harvest">08/27/2014</td>
        </tr>
        <tr>
            <th>Spring</th>
            <td class="directsow">Direct Sow</td>
            <td>Radish</td>
            <td class="directsow">05/05/2014</td>
            <td class="transplant"></td>
            <td class="transplant"></td>
            <td class="harvest">05/25/2014</td>
            <td class="harvest">06/04/2014</td>
        </tr>
        <tr>
            <td>Fall</td>
            <td class="directsow">Direct Sow</td>
            <td>Radish</td>
            <td class="directsow">07/22/2014</td>
            <td class="transplant"></td>
            <td class="transplant"></td>
            <td class="harvest">08/11/2014</td>
            <td class="harvest">08/21/2014</td>
        </tr>
        <tr>
            <th>Spring</th>
            <td class="transplant">Transplant</td>
            <td>Rhubarb</td>
            <td class="directsow"></td>
            <td class="transplant">04/28/2014</td>
            <td class="transplant">04/28/2014</td>
            <td class="harvest">04/28/2014</td>
            <td class="harvest">04/28/2014</td>
        </tr>
        <tr>
            <th>Spring</th>
            <td class="directsow">Direct Sow</td>
            <td>Rutabaga</td>
            <td class="directsow">04/28/2014</td>
            <td class="transplant"></td>
            <td class="transplant"></td>
            <td class="harvest">07/27/2014</td>
            <td class="harvest">07/27/2014</td>
        </tr>
        <tr>
            <th>Spring</th>
            <td class="directsow">Direct Sow</td>
            <td>Spinach</td>
            <td class="directsow">04/28/2014</td>
            <td class="transplant"></td>
            <td class="transplant"></td>
            <td class="harvest">06/07/2014</td>
            <td class="harvest">06/27/2014</td>
        </tr>
        <tr>
            <td>Fall</td>
            <td class="directsow">Direct Sow</td>
            <td>Spinach</td>
            <td class="directsow">07/15/2014</td>
            <td class="transplant"></td>
            <td class="transplant"></td>
            <td class="harvest">08/24/2014</td>
            <td class="harvest">09/13/2014</td>
        </tr>
        <tr>
            <th>Spring</th>
            <td class="directsow">Direct Sow</td>
            <td>Squash (Summer)</td>
            <td class="directsow">05/19/2014</td>
            <td class="transplant"></td>
            <td class="transplant"></td>
            <td class="harvest">07/13/2014</td>
            <td class="harvest">07/23/2014</td>
        </tr>
        <tr>
            <th>Spring</th>
            <td class="transplant">Transplant</td>
            <td>Squash (Summer)</td>
            <td class="directsow"></td>
            <td class="transplant">04/21/2014</td>
            <td class="transplant">05/19/2014</td>
            <td class="harvest">07/13/2014</td>
            <td class="harvest">07/23/2014</td>
        </tr>
        <tr>
            <th>Spring</th>
            <td class="directsow">Direct Sow</td>
            <td>Squash (Winter)</td>
            <td class="directsow">05/19/2014</td>
            <td class="transplant"></td>
            <td class="transplant"></td>
            <td class="harvest">07/13/2014</td>
            <td class="harvest">09/01/2014</td>
        </tr>
        <tr>
            <th>Spring</th>
            <td class="transplant">Transplant</td>
            <td>Squash (Winter)</td>
            <td class="directsow"></td>
            <td class="transplant">04/21/2014</td>
            <td class="transplant">05/19/2014</td>
            <td class="harvest">07/13/2014</td>
            <td class="harvest">09/01/2014</td>
        </tr>
        <tr>
            <th>Spring</th>
            <td class="transplant">Transplant</td>
            <td>Tomato</td>
            <td class="directsow"></td>
            <td class="transplant">03/10/2014</td>
            <td class="transplant">05/19/2014</td>
            <td class="harvest">07/18/2014</td>
            <td class="harvest">08/07/2014</td>
        </tr>
        <tr>
            <th>Spring</th>
            <td class="directsow">Direct Sow</td>
            <td>Turnip</td>
            <td class="directsow">04/28/2014</td>
            <td class="transplant"></td>
            <td class="transplant"></td>
            <td class="harvest">06/17/2014</td>
            <td class="harvest">06/27/2014</td>
        </tr>
        <tr>
            <td>Fall</td>
            <td class="directsow">Direct Sow</td>
            <td>Turnip</td>
            <td class="directsow">07/15/2014</td>
            <td class="transplant"></td>
            <td class="transplant"></td>
            <td class="harvest">09/03/2014</td>
            <td class="harvest">09/13/2014</td>
        </tr>
        <tr>
            <th>Spring</th>
            <td class="transplant">Transplant</td>
            <td>Watermelon</td>
            <td class="directsow"></td>
            <td class="transplant">04/14/2014</td>
            <td class="transplant">05/12/2014</td>
            <td class="harvest">08/20/2014</td>
            <td class="harvest">09/19/2014</td>
        </tr>
    </tbody>
  </table>
</body>
</html>
@mkoryak
Copy link
Owner

mkoryak commented Sep 29, 2014

Can this be reproduced on a macbook with safari? If so, please put this code up on jsfiddle and ill take a look. I wont promise anything, I don't really support safari or any mobile browsers. If you figure out a solution let me know

@saintger
Copy link
Author

Yes it can be reproduced on Safari on Macbook: just resize the browser to make it look like an iPhone.
Here is jsfiddle:
http://jsfiddle.net/Lm35b6Le/
However I haven't been able to specify in jsfiddle:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Perhaps you know how to add this in the jsfiddle ?

Thanks !

@mkoryak
Copy link
Owner

mkoryak commented Sep 29, 2014

one more thing - can you include a screenshot. I see one issue where its calculating the width of the scrollbar wrong and so the header is ~15px shorter. Is that what you see?

@saintger
Copy link
Author

No not really.
For instance if the above example, when the table is displayed, only 3 columns headers and data are visible (Type, Method, Crop). If I scroll right to see the other columns, I can see the other columns data but not the columns headers (I cannot see Sow Direct, Sow Transplant, Transplant, Begin Harveest and End Harvest, it is truncated at Crop).
I'll try to make a quick screenshot tomorrow.

Thanks again,

@saintger
Copy link
Author

Hello again,

Here is a picture when I display the page:
http://imgur.com/lrPTzHQ

And here is a picture after I scroll right:
http://imgur.com/7BAH2cm

@mkoryak
Copy link
Owner

mkoryak commented Sep 30, 2014

Ok, the problem is with the $floatContainer width calculation, it probably ends up thinking that your scroll bar is 100px wide for some reason.

@mkoryak
Copy link
Owner

mkoryak commented Oct 22, 2014

sorry, this is low priority since I have no idea now to debug on safari nor do I have the time lately. Ill keep this open. Maybe some kind soul can submit a pull request

@saintger
Copy link
Author

No problem. Thanks for having looked into it.
If there is something I can do to debug it further, please let me know.

@mkoryak mkoryak added the bug label Nov 4, 2014
@iamreal2
Copy link

I just moved from stickyTableHeaders to floatThead (because table-responsive in BS3 not working with stickyTableHeaders). FloatThead is working fine for everything (a bit tricky to style floating header though) except for all Safari (Mac OS X or iOS) when it comes to horizontal scrolling with table-responsive under BS3.

I did some debugging on OS X with Safari and Chrome on Windows (Vmware Fusion) and understood that the actual $('table') has 'min-width' style added by floatThead - on all other browsers when the width becomes small enough the min-width is fixed at 621px. But under Safari this goes down as you further reduce the browser width. Didn't go further but this temporary fix works for my purpose - just manually add min-width: 621px; e.g.<table class="table" style="min-width: 621px;">...</table>

@mkoryak
Copy link
Owner

mkoryak commented Jan 15, 2015

I added support for perfect-scrollbar, and if you use that, that becomes a workaround for this issue:
http://mkoryak.github.io/floatThead/examples/perfect-scrollbar/

still not ideal, but better than nothing.

@mcyoung mcyoung mentioned this issue Jan 16, 2015
Closed
@mkoryak
Copy link
Owner

mkoryak commented Jan 21, 2015

It appears that this bug stems from the fact that safari's scrollbar width is basically 0. The scrollbar floats on top of the content. To fix this, I would need to detect safari, and perhaps OS?

What complicates matters a bit, is that its possible to style the scrollbar in webkit, so you could style it to have a width of 40px, and to NOT float on top of your content. So obviously setting it to 0 is not the best solution.

mkoryak added a commit that referenced this issue Feb 1, 2015
@mkoryak
initial safari support #108, #117
d1e029b 
fixed crappy jquery version detection debug output
@mkoryak
Copy link
Owner

mkoryak commented Feb 1, 2015

I think this is now pretty much a duplicate of #108 - closing this, move discussion there if you have any more questions

@mkoryak mkoryak closed this as completed Feb 1, 2015
@lock
Copy link

lock bot commented Dec 10, 2019

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

@lock lock bot locked as resolved and limited conversation to collaborators Dec 10, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
duplicate
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@mkoryak @saintger @iamreal2