CSS position fixed doesn't work when parent div has an animation transition.

Issue #12699983 • Assigned to Matt R.

Details

Author
Simon B.
Created
Jul 10, 2017
Privacy
This issue is public.
Found in
  • Microsoft Edge
Reports
Reported by 4 people

Sign in to watch or report this issue.

Steps to reproduce

Any div with a CSS animation rule containing a child element having position: fixed will not be positioned relative to the main window. Instead the child becomes docked to the animated div (Hey! you’ve inadvertently implemented position: sticky!)

All other browsers behave correctly.

<style>
.fixed {
  position:fixed;
  bottom:0; right: 0; left:0;
  background: #ccc;
}
@keyframes page-in {
    0% { transform: scaleX(1.1) scaleY(1.1); }
    100% { }
}

body > div {
  width: 200px;
  height: 100px;
  margin: auto;
  animation:page-in .5s ease forwards;
  background: #cc0000;
}
</style>
<div class="outer">
<div class="fixed">
I should be a the bottom of the page, not this box.
</div>
</div>

The only workaround for Edge is to explicitly turn off the rule, eg element.style.animation = 'none'.

A reproduction of the bug is also available here: https://jsfiddle.net/su1bduyp/2/

Attachments

0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “James M.”

      Changed Assigned To to “Bogdan B.”

      Changed Assigned To to “Rick J.”

      Changed Assigned To from “Rick J.” to “Matt R.”

    • This also appears to be the case with the transition property.

    You need to sign in to your Microsoft account to add a comment.

    Sign in