Animation problem on page with overflow

Issue #17192668 • Assigned to wptcomptri

Details

Author
Kamil P.
Created
Apr 25, 2018
Privacy
This issue is public.
Found in
  • Microsoft Edge
Reports
Reported by 1 person

Sign in to watch or report this issue.

Steps to reproduce

Attached demo html file. It contains animated loading element on top of div with overflow. When you open this page and resize Edge window to get overflow scroll animation goes crazy. It is working correctly on any other browser

<html>
<head>
<title></title>

<style type="text/css">
    @keyframes loading{
        0%{transform:rotate(0deg)}
        100%{transform:rotate(360deg)}
    }

    #loading{
        width: 65px;
        height: 65px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin: auto;
        animation: loading 1.2s linear infinite;
        background: rgba(244, 244, 244, 0.69);
        box-shadow: 0 0 0 10000px rgba(10, 10, 10, 0.69);
        opacity: 1;
        pointer-events: none;
        z-index: 2999;
        background-color: #dedede;
    }
</style>

</head>
<body>
    <div id="loading"></div>

    <div style="overflow-y: auto; height: 100%;">
        <div style="height:800px; background:rgba(100, 100, 244, 0.69);"></div>
    </div>

</body>
</html>

Attachments

Comments and activity

  • Microsoft Edge Team

    Changed Assigned To to “Travis L.”

    Changed Assigned To to “Bogdan B.”

  • Thanks, this looks like something worth investigating.

  • Microsoft Edge Team

    Changed Assigned To to “wptcomptri”

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

Sign in