Friday, April 1, 2016

max-height and overflow not scrolling on ie9

By Hường Hana 7:00 AM , , Leave a Comment

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):

enter image description 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/

1 Answers

Answers 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.

If You Enjoyed This, Take 5 Seconds To Share It

0 comments:

Post a Comment