I've been wrestling for hours with a frustrating issue in Internet Explorer 11.
The problem lies within a header that contains two child elements. I'm using flexbox space-between to display them. The second element, positioned on the right side of the header, has position relative and a child element with position absolute. On click, I animate the position of the absolute-positioned element using transform translateY, causing it to slide directly below the right element in the header. This works perfectly on every browser except IE11, where the flyin extends too far to the right (resulting in vertical overflow) and cuts off the last element's width.
If I add padding-right: 100px; to the element .header__selection, the flyout shifts to the right within the viewport and covers all elements correctly. Additionally, removing position relative from the parent element ensures the box width is correct. I'm stumped as to why this behavior is happening, but suspect it may be related to positioning and flexbox. Any insights would be greatly appreciated.
Feel free to use the snippet provided to test across different browsers. You can view a screenshot of how it appears on IE11 here: https://i.sstatic.net/8bFge.png
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>