altura máxima y desbordamiento sin desplazamiento en ie9
Tengo un problema muy extraño en ie9 donde un div con una altura máxima (establecido con calc() y vh) y desbordamiento automático no se desplaza.
Puede ver lo que está sucediendo haciendo clic en esta imagen (si el GIF no se carga aquí):
Mi 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>
CSS relevante:
.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;
}
No entiendo por qué está sucediendo esto, ya que ie9 soporta vh, calc() y max-height. Alguna idea?
JSFiddle Demo: https://jsfiddle.net/sbgg5bja/3 /
26
Author: Luca Putzu, 2016-03-23
1 answers
Parece ser un problema de repintado, al combinar position: fixed
y transform: translate
.
Aquí hay 2 posibles correcciones:
- Establezca la propiedad overflow en scroll. Es decir,
overflow-y:scroll
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=0, M22=1, SizingMethod='auto expand')";
Si ninguno de los dos lo hace, puede soltar el transform: translate
y usar por ejemplo display: table
para centrarlo.
15
Author: LGSon,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 12:16:42
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 12:16:42