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 2 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.”

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

    Sign in