IE10 Issue with Scrollbar on Div

Question

I am using a scrollbar on a div and it appears to be having a rendering issue in IE10.

When you scroll the div all the way to the bottom, then back to top, the top content is missing.

Do you know if there is a solution for IE10?

Link: http://landpros.com/propsearch.php

Here is the CSS on the div:

.prop-search-content-wrapper{
    margin: 0 0 30px 0;
    padding: 0;
    height: 980px;
    overflow-x:hidden;
    overflow:scroll;
}

Thank you!

Answer 1

I did manage to reproduce this - to see the cause of the issue (I think) turn off the overflow-x: hidden directive. If the content is missing it will come back and you will get a vertical scroll bar. Something is going on that is causing IE10 to think it needs to hide that whole top row(s).

The fix should be to readjust your widths of any content of the containing div with class content-wrapper to match the parent and never need overflow-x: hidden; in the first place.

*Note: I struggled to consistently reproduce.

Answer 2

I wasn't able to reproduce the problem with my IE 11 emulating IE 10 with the developer tools. But I agree with Matthew, that it is most probably caused by the overflow-x: hidden setting.

You can easily avoid it!

Have a look at your foundation.css file (at line 233 and 235):

.row .row { width: auto; max-width: none; min-width: 0; margin: 0 -10px; }

Beside the fact that the rule exists twice, your "trouble" arises from the negative left and right margins. You dont need them, so just remove them!

By doing so, there is no more need for the overflow-x: hidden setting.
BTW: Why do you set the max-width to none, instead of 100%, if you don't want an element to horizontally overflow its parent?

So please try it and let us know, if this fixes (avoids) your problem - thanks!