In IE9, when table overflows, an error occurs with table-responsive and table-hover

[TheWilks]

When the IE9 browser window is minimized an error occurs with responsive-table and table-hover. Extra space is added to the bottom of the table on hover.

<div class="table-responsive">
  <table class="table table-hover">
    <thead>
      <tr>
        <th>Case number</th>
        <th><abbr title="Survey specific identifier">SSID</abbr></th>
        <th>Last attempt</th>
        <th>Address/area</th>
        <th>Survey</th>
        <th>Activity</th>
        <th class="text-center">Case indicator(s)</th>
      </tr>
    </thead>
    <tbody>
      <tr title="1 related case" class="warning">
        <td><a href="cases/IE/viewCase.html">00108333</a></td>
        <td>35010001&nbsp;0001</td>
        <td>&nbsp;</td>
        <td>123 Elm Street</td>
        <td>Census of Population</td>
        <td>Interviewing/enumeration</td>
        <td class="text-center">1 <i class="fa fa-thumb-tack"></i></td>
      </tr>

      <tr>
        <td><a href="cases/IE/viewCase.html">15293482</a></td>
        <td>35010003&nbsp;0043</td>
        <td>&nbsp;</td>
        <td>742 Evergreen Terrace</td>
        <td>Census of Population</td>
        <td>Interviewing/enumeration</td>
        <td></td>
      </tr>

      <tr title="5 related cases" class="warning">
        <td><a href="cases/IE/viewCase.html">00093982</a></td>
        <td>35010007&nbsp;0065</td>
        <td>&nbsp;</td>
        <td>94 Somerset Street West</td>
        <td>Census of Population</td>
        <td>Interviewing/enumeration</td>
        <td class="text-center">5 <i class="fa fa-thumb-tack"></i></td>
      </tr>

      <tr title="18 related cases" class="warning">
        <td><a href="cases/IE/viewCase.html">00092331</a></td>
        <td>35010007&nbsp;0069</td>
        <td>&nbsp;</td>
        <td>101 Somerset Street West</td>
        <td>Census of Population</td>
        <td>Interviewing/enumeration</td>
        <td class="text-center">18 <i class="fa fa-thumb-tack"></i></td>
      </tr>

      <tr>
        <td><a href="cases/IE/viewCase.html">00092293</a></td>
        <td>35010007&nbsp;0084</td>
        <td>No contact</td>
        <td>85 Scott Street</td>
        <td>Census of Population</td>
        <td>Interviewing/enumeration</td>
        <td></td>
      </tr>

      <tr>
        <td><a href="cases/IE/viewCase.html">00091483</a></td>
        <td>35010007&nbsp;0085</td>
        <td>Refusual</td>
        <td>87 Scott Street</td>
        <td>Census of Population</td>
        <td>Interviewing/enumeration</td>
        <td></td>
      </tr>

    </tbody>
  </table>
</div>

[cvrebert]

As a JS Bin: http://jsbin.com/yelug/

[cvrebert]

I'm unable to reproduce in Windows 7 IE9 on Sauce. Is your page missing the </div> perhaps?

[hnrch02]

Is this what you mean?

[cvrebert]

Dafuq. That is one nasty browser bug. @hnrch02 I presume that it stops being reproducible in IE10?

[hnrch02]

Yes, only IE9 is affected.

[cvrebert]

Yup, known IE9 browser bug:

• http://bugs.jquery.com/ticket/10854
• (Cached copy since the server is fairly slow) http://blog.brianrichards.net/post/6721471926/ie9-hover-bug-workaround

The suggested fix would be:

.table-responsive {
  min-height: 0%;
}

Which indeed fixes the problem for me in Sauce (and I was able repro the original).

[cvrebert]

Documented the bug in MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/:hover$compare?to=681033&from=675369

[TheWilks]

Works perfectly. Thanks everyone. I appreciate the quick responses.

[XhmikosR]

@cvrebert: is the unit needed?

[cvrebert]

I don't know.

[XhmikosR]

Well, the resulting CSS won't have the unit so if it's not really needed we should remove it. Otherwise, we might have to look at clean-css's options.

[cvrebert]

@XhmikosR Bad news. My testing indicates that it needs to be 0% specifically. 0 or 0px doesn't work.

[hnrch02]

@cvrebert How about we just use 1%? Still fixes it for me in IE9.

[cvrebert]

Wouldn't that have an edge case where the .table-responsive would have a nonzero height if its parent is large enough even if its <table> is empty?

[hnrch02]

Fine, then we got to figure out how to disable the unit removal. I was just trying to be lazy 😄

[hnrch02]

.0% works. Never mind, still get's compressed to 0 in the minified file.

[XhmikosR]

The thing is, there isn't any way to do that in clean-css...

/CC @jakubpawlowicz

[jakubpawlowicz]

There's no way currently indeed. Does using sth like 0.01% work?

[XhmikosR]

@jakubpawlowicz: unfortunately, I can't reproduce on my system so we'll need @cvrebert or @hnrch02 to confirm that :/

[hnrch02]

Yes, 0.01% also fixes the issue.

[jakubpawlowicz]

@hnrch02 Great, hopefully without side effects. clean-css won't strip % in this case.

[hnrch02]

@mdo How should we proceed here?

[hnrch02]

Addressed by 783eced.

[jakubpawlowicz]

As a side note, in clean-css 3.2 you'll be able to turn off 0[unit] -> 0 minification. See clean-css/clean-css@997d4d7.

[pavelthq]

@cvrebert 3.5 clean-css exists yet, I think commit f41acae can be fixed?

[cvrebert]

Filed #18144 for the outstanding zeroUnits TODO.