Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Stacking Context can be created with an opacity of 1 inside animation keyframe #21002

Open
hallzy opened this issue Sep 22, 2022 · 1 comment
Open

Stacking Context can be created with an opacity of 1 inside animation keyframe #21002

hallzy opened this issue Sep 22, 2022 · 1 comment
Labels
Content:CSS Cascading Style Sheets docs help wanted If you know something about this topic, we would love your help!

Comments

@hallzy
Copy link

hallzy commented Sep 22, 2022 •
edited

MDN URL

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

What specific section or headline is this issue about?

The stacking context

What information was incorrect, unhelpful, or incomplete?

I ran into a problem today where there was a page that had an animation keyframe that changed the opacity from 0 to 1 that was creating a stacking context (or, at least something that behaves and looks like a stacking context). Even if you change the keyframe to use opacity from 1 to 1, it is still creating a stacking context, which is (so far as I an tell) undocumented behaviour that is reproducible on Chrome, Safari, and Firefox.

Maybe this is more of a browser bug than a documentation bug?

What did you expect to see?

Assuming the behaviour I have outlined is expected behaviour, this should be documented. If not, then someone (or I) should be reporting this issue.

Do you have any supporting links, references, or citations?

I have a proof of concept HTML page to illustrate my point.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Animation Stacking POC</title>
    <style>
        body
        {
            margin: 0;
        }

        .header
        {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100px;
            background: black;
            box-sizing: border-box;
            z-index: 1;
        }

        .content
        {
            position: fixed;
            top: 10px;
            width: 300px;
            height: 300px;
            z-index: 100000;
        }

        .test .content
        {
            background: red;
            right: 10px;
        }

        .notTest .content
        {
            background: blue;
            left: 10px;
        }

        .test {
            -webkit-animation:testKeyFrame 0.2s ease 1 forwards;
            -moz-animation:testKeyFrame 0.2s ease 1 forwards;
            -ms-animation:testKeyFrame 0.2s ease 1 forwards;
            -o-animation:testKeyFrame 0.2s ease 1 forwards;
            animation:testKeyFrame 0.2s ease 1 forwards;
        }

        @keyframes testKeyFrame {
            from{
                opacity:1;
            }
            to{
                opacity:1;
            }
        }
        @-moz-keyframes testKeyFrame {
            from{
                opacity:1;
            }
            to{
                opacity:1;
            }
        }
        @-webkit-keyframes testKeyFrame {
            from{
                opacity:1;
            }
            to{
                opacity:1;
            }
        }
        @-ms-keyframes testKeyFrame {
            from{
                opacity:1;
            }
            to{
                opacity:1;
            }
        }
        @-o-keyframes testKeyFrame {
            from{
                opacity:1;
            }
            to{
                opacity:1;
            }
        }
    </style>
</head>
<body>
    <div class='header'></div>
    <div class='test'>
        <div class='content'></div>
    </div>
    <div class='notTest'>
        <div class='content'></div>
    </div>
</body>
</html>

The only difference between the left (blue) and right (red) box (apart from their position and colour) is that the red box has an animation with a keyframe that changes opacity from 1 to 1 on a parent div, while the blue one does not.

As you can see, that animation has created a stack context, causing the red box to be behind the black header.

If you try removing the animations from the .test css rule, the red box comes in front of the header as expected. If you then set opacity: 1 in the .test while the animations are still removed, there is still no stacking context (as expected)

If you then change that opacity to something < 1 (still with the animations commented) a new stacking context is created as expected, and the red box appears behind the black header (exactly the same as when we had the animation)

Do you have anything more you want to share?

Screenshot of the HTML I provided above rendered in chrome (unexpected stacking context created):

image

Same page, but with the animations removed (no stacking context, as expected):

image

Same page but animations removed and opacity: 1 set (no stacking context, as expected):

image

Same page but animations still removed, and opacity: 0.999 is set (stacking context created, as expected):

image

MDN metadata

Page report details
@github-actions github-actions bot added needs triage Triage needed by staff and/or partners. Automatically applied when an issue is opened. Content:CSS Cascading Style Sheets docs labels Sep 22, 2022
@sideshowbarker sideshowbarker added help wanted If you know something about this topic, we would love your help! and removed needs triage Triage needed by staff and/or partners. Automatically applied when an issue is opened. labels Sep 24, 2022
@hallzy
Copy link
Author

hallzy commented Oct 12, 2022

Bumping: Any updates on this?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Content:CSS Cascading Style Sheets docs help wanted If you know something about this topic, we would love your help!
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@sideshowbarker @hallzy