Animation problem on page with overflow

Confirmed Issue #17192668 • Assigned to wptcomptri


Kamil P.
Apr 25, 2018
This issue is public.
Found in
  • Microsoft Edge
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


<style type="text/css">
    @keyframes 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;

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

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



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”

    Changed Status to “Confirmed”

    Changed Assigned To from “wptcomptri” to “Matt A.”

    Changed Assigned To to “wptcomptri”

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

Sign in