max-height ve taşma ie9 üzerinde kaydırma değil

Question

max-height (calc() ve vh ile ayarla) ve taşma otomatik kaydırma yapmıyorsa ie9'da çok garip bir sorun var.

Sen (GIF burada yüklemez ise) bu görsele tıklayarak neler olduğunu görebilirsiniz:

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

İlgili 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; 
} 

Bunun nedenini anlamıyorum, ie9 desteği vh, c alc() ve maksimum yükseklik. Herhangi bir fikir?

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

Answer 1

O position: fixed ve transform: translate birleştirirken bir rötuş sorunu olduğu anlaşılıyor.

Burada 2 olası düzeltmeler geçerli:

• kaydırmak için taşma özelliği ayarlayın. Yani,
• -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=0, M22=1, SizingMethod='auto expand')";

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

Bunlardan hiçbiri bunu yapıyorsa, transform: translate bırakın ve ortalamak örneğin display: table için kullanabilirsiniz.