This is the 19th day of my participation in the Genwen Challenge

background

As a junior front-end engineer, a senior bug maker and an entry-level bug repairman, I found a bug in the company’s project today and plan to solve it and record it.

Well, unfortunately, it just happened to work out.

The CSS world is amazing.

Start with the business scenario;

It is an APP developed with UNI-APP that is compatible with H5. I am a new employee in the company and am studying the company’s project.

I just saw a bug, the drop-down refresh is self-developed, without UNIapp, there is a boot interface in the project.

However, when scrolling with the mouse, the z-index of the boot layer will be inactivated, no matter how you adjust it.

So open is the way to explore.

Find out why.

At that time, when I saw the bug, I tried to find the time when the problem appeared.

Finally, after several attempts, it was confirmed that the problem had occurred while scrolling back to the top.

It must have been listening for the scroll time and doing something when it was scrolling back to the top that caused the problem.

So, following the code, I found the component of the pull-down refresh, and finally clarified the ins and outs of the problem.

Restore the scene.

<body>
    <div class="wrap">
        <div class="guide"></div>
    </div>
    <div class="mask"></div>
</body>
<style>
    body{ margin: 0; padding: 0; }
    .wrap{
        position: absolute;
        left: 0; right: 0;
        top: 0; bottom: 0;
        background-color: #fff;
    }
    .guide{
        position: absolute;
        left: 0; right: 0;
        top: 0; bottom: 0;
        margin: auto;
        width: 100px;
        height: 100px;
        background-color: red;
        z-index: 99;
    }
    .mask{
        position: absolute;
        left: 0; right: 0;
        top: 0; bottom: 0;
        margin: auto;
        background-color: rgba(33.33.33.3);
    }
</style>
Copy the code

Here’s the expected scenario;

Here’s what it looks like when scrolling back to the top causes z-index to fail.

So what’s going on here?

After some searching, the code changed as follows:

.wrap{
    position: absolute;
    left: 0; right: 0;
    top: 0; bottom: 0;
    background-color: #fff;
    transform: translateY(0px);  /* New style */
}
Copy the code

Transform added here. Is a drop-down refresh function, to restore to the top, otherwise the next drop-down will be directly offset to the last part of the drop-down.

Pull down the refresh part in the red box below. Transform: translateY(0px); To restore

Problem analysis

In CSS, z-index is a peer comparison, usually we adjust the hierarchy by making position non-static (the default) and then setting z-index.

After setting the transform, Stacking Context (the three-dimensional concept of CSS) is triggered for the elements. The hierarchy of elements that are then re-rendered;

Now that you’ve located the problem, start solving it.

Solutions.

Technical solutions.

This solution doesn’t solve my code problem, but it’s an idea. So write another code;

Transform-style: preserve-3d; Then the child elements will be rendered in three dimensions.

<body>
    <! Add a common parent that is not body -->
    <div class="father">
        <div class="wrap">
        </div>
        <div class="guide">guide</div>
        <div class="mask">mask</div>
    </div>
</body>
<style>
.father{
    position: absolute;
    left: 0; right: 0;
    top: 0; bottom: 0;
    transform-style: preserve-3d;
}
.guide{ transform: translateZ(11px); }
.mask{ transform: translateZ(10px); }
</style>
Copy the code

Violence with violence

In my code, guide is a child of wrap, and mask is a common element, so it needs to be separated, while wrap sets the transform, resulting in the entire wrap hierarchy being lower. So I couldn’t solve it this way, so I did a very violent, very crooked solution.

The first is the uni-app project, so I used V-IF to render. Wrap.

<div class="wrap" v-if="showGuide" id="guideWrap">
    <div class="guide"></div>
</div>
Copy the code

I check if the guideWrap element exists and, if so, set the wrap’s transform property to null, unstacking the property so that it does not trigger the Stacking Context.

conclusion

CSS is a wonderful world, there are all kinds of stories every day.

Hopefully today’s article will help you.