Can you explain why IE11 incorrectly sizes a fixed positioned element when its parent has a relative position with specific dimensions, border-radius, and hidden overflow? In this scenario, the fixed element ends up taking on the size of its parent instead of setting its own size.
For instance:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-CH" lang="de-CH">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Fixed Test</title>
<style>
div {
position: relative;
overflow: hidden;
min-height: 100px;
width: 200px;
border-radius: 5px;
background-color: green;
}
.fixed {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 1000;
background-color: red;
}
</style>
</head>
<body>
<div><span onclick="this.className='fixed'">click me</span></div>
</body>
</html>