Getting rid of CSS font-size padding without slowing Firefox scroll speed

Question

I have a web app where I have a lot of tall images that I want to display horizontally centered on the page inside a scrolling div with no padding on top or bottom whatsoever, with the whole thing wrapped in a "window" like in the example code. Now, the problem here is that if you remove the font-size: 0 declaration from the .view, you get a tiny amount of padding underneath the image. Setting the font size to 0 gets rid of that padding, but at the same time, it makes the scrolling inside the div really slow in Firefox because the scroll speed in Firefox is tied to font-size, as detailed here. My question is - is there a way in this scenario to get rid of that annoying bit of extra padding without also crippling the Firefox scroll speed in the process?

I would like to avoid any kind of solutions that would rely on hardcoded values, eg. I don't want to do something like img { margin-bottom: <-Xpx/-Xem>; }, as this is not reliable cross-browser (for example, setting a 16px font size results in the extra padding being 3px in Chrome, 4px in Firefox and 5px in IE11).

HTML:

<div class="window">
    <div class="view">
        <img src="http://placekitten.com/300/2000" alt="kitty" />
   </div>
</div>

CSS:

body {
    margin: 0;
    padding: 0;
}

.window {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
}

.view {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    text-align: center;
    font-size: 0;
}

score 0 · Accepted Answer · answered Nov 28 '14 at 10:25

Playing around with my own JSFiddle I managed to figure this one out on my own - I simply needed to wrap the image in an extra div and move the font-size: 0 declaration inside it, and as a result the scroll speed remains sane in the actually scrolling parent div. Seems like posting about this ended up being a successful case of rubber duck debugging.

HTML:

<div class="window">
    <div class="view">
        <div class="wrap">
          <img src="http://placekitten.com/300/2000" alt="kitty" />
        </div>
   </div>
</div>

CSS:

body {
    margin: 0;
    padding: 0;
}

.window {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
}

.view {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    text-align: center;
}

.wrap { font-size: 0; }

Getting rid of CSS font-size padding without slowing Firefox scroll speed

1 Answers1