css - internet - flexbox browser support
IE y Edge flexbox bug? (1)
Noté una anomalía en Edge e IE al usar flexbox con columnas desplazables junto con un desplazamiento horizontal. El siguiente codepen demuestra la funcionalidad correcta en Chrome y Firefox; sin embargo, hay una barra de desplazamiento adicional en el extremo derecho de la vista para un ligero desbordamiento vertical (la altura de la barra de desplazamiento horizontal) que solo está presente en IE 11 y Edge:
El html crudo para referencia:
<body>
<div class="app-master">
<div class="app-sidebar-spacer">
</div>
<div class="app-content">
<div class="app-header">
<div class="ui secondary small menu">
<a class="right item">
<div>
<span>happy text</span>
</div>
</a>
</div>
</div>
<div class="app-work-zone">
<div class="app-zone-content">
<div class="ui segment app-zone-segment">
</div>
</div>
<div class="app-zone-buffer">
</div>
<div class="app-zone-content">
<div class="ui segment app-zone-segment">
<div>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." "Lorem
ip"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
sum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." "Lorem
ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." "Lorem
ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</div>
</div>
</div>
<div class="app-zone-buffer">
</div>
<div class="app-zone-content">
<div class="ui segment app-zone-segment">
</div>
</div>
<div class="app-zone-buffer">
</div>
</div>
</div>
</div>
</body>
El css en bruto para referencia:
html,
body {
height: 100%;
margin: 0;
min-height: 100%;
padding: 0;
}
.app-master {
display: flex;
flex-direction: row;
height: 100%;
}
.app-sidebar-spacer {
flex: 0 0 215px;
background-color: #2959a5;
}
.app-content {
flex: 1 1 auto;
display: flex;
flex-direction: column;
overflow-x: auto;
}
.app-header {
min-height: 43px;
}
.app-header>.ui.menu {
width: 100%;
}
.app-work-zone {
flex: 1 1 auto;
display: flex;
flex-direction: row;
min-height: 0;
}
.app-zone-content {
flex: 1 1 0;
min-width: 600px;
}
.app-zone-buffer {
width: 2px;
text-align: center;
}
.app-zone-segment {
height: 100%;
overflow-y: auto;
}
Notas:
- Tengo una carga semántica en el codepen para el diseño básico, pero el diseño se desarrolla utilizando flexbox puro (no el sistema de cuadrícula semántica).
- La ui semántica ya usa el normalizador, por lo que se desactiva en el cód.
- En el codepen, tengo "autoprefixer" activado.
- Al visualizar en IE, ajuste la altura de la ventana de vista previa, y la barra de desplazamiento vertical de la ventana de vista previa mostrará de repente el desplazamiento.
- Todas mis clases personalizadas tienen el prefijo "aplicación-".
A continuación se muestran imágenes de lo que parece ser una implementación operativa de este concepto por parte de la gente de Asana; sin embargo, estoy luchando por comprender la implementación.
Imagen 1) Con la ventana contraída, lo que da como resultado un desplazamiento horizontal correcto en Edge, sin contenido oculto en la parte inferior de la pantalla, y sin barra de desplazamiento extraña en el extremo izquierdo de la vista:
Imagen 2) Con la ventana expandida (y sin desplazamiento horizontal en Edge para demostrar que no se ocultaba ningún contenido cuando estaba activo el desplazamiento horizontal):
Entonces, ¿esto es realmente un error en IE y Edge, o la implementación aparentemente funcional de Asana demuestra una solución alternativa?
Editar 1) Se agregó una descripción más detallada de la anomalía.
Editar 2) Se agregó un enlace de codepen actualizado para rastrear el progreso del navegador cruzado.
Editar 3) Codepen final actualizado con hacks funcionales. La funcionalidad ahora debería ser idéntica en IE11, Edge, Chrome y FF. La lista completa de hack funcional es:
@supports (-ms-ime-align: auto) and (not (object-fit: cover)) {
.app-content {
overflow-x: scroll;
}
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.app-content {
overflow-x: scroll;
}
}
La siguiente consulta de medios revierte overflow-x a automático en los navegadores donde se configuró para desplazarse (ver hacks justo encima de este) cuando el ancho del navegador es mayor que 825px. Este número se deriva del 225px utilizado para el lado izquierdo de navegación, y el mínimo de 200 px utilizado para cada elemento de la caja flexible a la derecha de la navegación lateral. Esto evita una barra de desplazamiento horizontal extraña en IE11 y Edge cuando el ancho del navegador es mayor que 825px.
@media (min-width: 825px) {
.app-content {
overflow-x: auto;
}
}
Final (actualizado con hacks funcionales) Ejemplo de Codepen
Esto es obviamente un error (no he encontrado ningún informe de error todavía y lo actualizaré cuando lo haga).
He probado esto con Edge en la versión de Actualización de creadores de fallos de Windows 10 (Microsoft EdgeHTML 16), y ahora está arreglado y funciona como debería.
Aquí hay otra publicación sobre el mismo problema, donde una solución para IE es usar scroll lugar de auto ( overflow-x: scroll )
Actualizado basado en un comentario
Este es un intento de encontrar un hack basado en CSS que detectará IE 11 y Edge 12-15.
Este IE 11 CSS hack parece funcionar correctamente:
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.app-content {
overflow-x: scroll;
}
}
Para Edge, este hack de CSS parece funcionar:
El siguiente truco parece funcionar para encontrar Edge:
@supports (-ms-ime-align: auto) {
.app-content {
overflow-x: scroll;
}
}
Aunque esto también atrapa a Edge 16, pero aquí tuvimos suerte ya que Edge 16 agregó soporte para object-fit
Así que simplemente verificando tanto el (-ms-ime-align: auto) como (not (object-fit: cover)) , deberíamos poder distinguir claramente Edge 12-15 de 16
@supports (-ms-ime-align: auto) and (not (object-fit: cover)) {
.app-content {
overflow-x: scroll;
}
}
Como se señaló, Microsoft parece moverse para eliminar tantas propiedades prefijadas -ms como sea posible en el futuro MS Edge, aunque no nos importa, ya que queremos apuntar a las versiones anteriores que aún las tienen.
He probado los 2 cortes de CSS anteriores con éxito en IE 11 y Edge 16 usando este Codepen:
Si alguien encuentra que esto no funciona en una versión Edge específica, házmelo saber para que pueda mantener esta publicación actualizada.
Para ti que prefieres usar Javascript, aquí hay una publicación con algunas lecturas interesantes: