max-height and overflow not scrolling on ie9

Question

I have a very strange issue on ie9 where a div with a max-height (set with calc() and vh) and overflow auto is not scrolling.

You can see what is happening by clicking on this image (if the GIF does not load here):

My HTML:

<div class="modal">
  <div class="modal__title">Modal Title</div>
  <div class="modal__body">
    <p>When I am too tall, I should scroll on ie9, but I don't.</p>
  </div>
  <div class="modal__footer">Footer here</div>
</div> 

Relevant CSS:

.modal {
  min-width: 500px;
  max-width: 800px;
  border-radius: 4px;
  max-height: 65vh;
  overflow: hidden;
  background-color: white;
  position: fixed;
  top: 15vh;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}

.modal__body {
    max-height: calc(65vh - 120px)); // 120 is the combined height of the header and footer
    overflow-y: auto;
}

I don't understand why this is happening, as ie9 support vh, calc() and max-height. Any ideas?

JSFiddle Demo: https://jsfiddle.net/sbgg5bja/3/

Ehling

There is a typo max-heigh: to max-height:. Maybe the issue? – Superordinate

Can you make a fiddle? – Ludwog

@sebastianbrosch - sorry, no, that was just my typing here :P – Ehling

@CornéSteenbakkers Fiddle: jsfiddle.net/sbgg5bja/4 – Ehling

Dear IE, This is why we hate you. — Sincerely, Every Developer Ever. This looks like a render issue. Have you tried this on other Operating Systems (Windows 10, 8, 7)? Is this running on a native machine or a virtual machine? – Tb

What happens if you temporary remove the transform translate ? .. get the feeling it has to do with that – Chekhov

Actually, while you're at it, if it still behaves bad, also remove the calc() temporary and let us know if it still won't work. – Chekhov

@JosephMarikle It's been tested on both a VM and native machine. I'm using Windows 7, ie9 in a VM. – Ehling

@LGSon - yes, indeed, removing the transform translate from the modal seems to fix the problem. Any idea why this might be happening? – Ehling

Obviously, also, if I remove the transform, I have to find another way of centering the modal, which is possibly problematic as I do not know the modal width (only the max-width) – Ehling

Answer 1

It appears to be a repaint issue, when combining position: fixed and transform: translate.

Here is 2 possible fixes:

• Set the overflow property to scroll. I.e, overflow-y:scroll
• -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=0, M22=1, SizingMethod='auto expand')";

Src: How to solve IE9 scrolling repaint issue with fixed-position parent that has -ms-transform:translate?

If neither of these does it, you could drop the transform: translate and use for example display: table to center it.

Chekhov

overflow-y: scroll is not an option, as I only want to see the scrollbar if it is actually needed. However, the filter works perfectly. Thank-you :) – Ehling