I'm struggling since hours with a flyin in Internet Explorer 11.
I have a header with two child elements. I display them with flexbox space-between. The second element (on the right side of the header) has position relative and a child element which has position absolute. On click, I animate the position of the element with position absolute by using transform translateY, so it will slide in directly below the right element in the header. This works on every browser expect IE11, where the flyin is to much on the right (a vertical overflow is visible) and where the width is excluding the last element.
When I use padding-right: 100px; on the element .header__selection, the flyout is on the right of the viewport and the box width covers all elements. Also when I remove position relative on the parent element, the box width is correct. I have no idea whats wrong here. I guess some problems with position and flexbox. Hope for some inputs.
Use the snippet to test on different browsers. Here is a screenshot how it looks on IE11:
const selection = document.querySelector('.header__selection');
const flyin = document.querySelector('.header__selection-flyin');
selection.addEventListener('click', function() {
flyin.classList.toggle('state-header__selection-flyin--open');
});body {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.header {
background-color: white;
border-bottom: 1px solid gray;
display: flex;
justify-content: space-between;
align-items: center;
height: 60px;
width: 100%;
}
.header__selection {
position: relative;
}
.header__selection-flyin {
display: flex;
background-color: lightcoral;
border: 1px solid black;
position: absolute;
transform: translateY(-100%);
transition: transform 0.3s ease-in-out;
right: 0;
z-index: -1;
}
.header__selection-flyin-item {
padding: 5px 10px;
}
.state-header__selection-flyin--open {
transform: translateY(100%);
z-index: 1;
transition: transform 0.3s ease-in-out, z-index 0.3s 0.2s;
}
<header class="header">
<div class="header__logo">Logo</div>
<div class="header__selection">
<div class="header__selection-active">
Selected Item
</div>
<div class="header__selection-flyin">
<div class="header__selection-flyin-item">Item</div>
<div class="header__selection-flyin-item">Item</div>
<div class="header__selection-flyin-item">Item</div>
</div>
</div>
</header>
