max-altezza e overflow non scorre su ie9

Question

Ho un problema molto strano su ie9 in cui un div con un'altezza massima (impostato con calc() e vh) e l'overflow automatico non scorre.

Si può vedere ciò che sta accadendo cliccando su questa immagine (se il GIF non carica qui):

mio 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> 

Rilevante 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; 
} 

Non capisco perché questo sta accadendo, come ad esempio 9 supporto vh, c alc() e altezza massima. Qualche idea?

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

Answer 1

Sembra essere un problema di ridisegno, quando si combinano position: fixed e transform: translate.

Ecco 2 correzioni possibili:

• Impostare la proprietà overflow per scorrere. Cioè, 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?

Se nessuno di questi lo fa, si potrebbe cadere la transform: translate e utilizzare per esempio display: table per centrarla.