css - IE/Edge 滚动问题

Question

我在 Edge 中遇到滚动问题，

好像跟base元素粘性有关系

这是站点链接 http://www.power-sonic.co.uk/drm/#section1

当您滚动时，它应该在图像右侧显示内容，它适用于除 edge 之外的所有其他浏览器..

但是，如果我将包装器元素更改为 position: sticky 它可以工作，但它非常滞后，

有没有更好的解决方法，为什么 Edge 中的相对位置会出现问题(如果这就是问题的话)。

HTML:

<div class="bg-parralax responsive-hide">
<section class="services-types container services-types-web">
    <div class="item is-business">
        <div class="pin-wrapper">
            <div class="image"></div>
            <div id="section1" class="font-o title">
                <h3>ABOUT THE DRM SYSTEM</h3>
            </div>
        </div>
    </div>
    <div id="test" class="item is-consumers">
        <div class="pin-wrapper">
            <div class="image"></div>
            <div class="titles">
                <div class="text-block">
                <h4>Designed by experts</h4>
                <p>Power Sonic has been a leading force within the power solutions
                    industry for nearly fifty years. The same amount of expertise, quality
                    control and innovation has gone into developing the DRM system.
                    The cutting edge software has been designed to specifically operate
                    the technology to maximize efficiency and reliability.</p>
                </div>
                <div class="text-block">
                <h4>Fully compliant to import and export power</h4>
                <p>The DRM system is designed to operate with grid systems to import
                    and export power with the voltage and frequency regulations
                    including, FFR and DFFR schemes required by utilities to support the
                    grid. The DRM system can be used to support the stabilization of the
                    power grid.</p>
                </div>
                <div class="text-block">
                <h4>Complete solution</h4>
                <p>Our DRM system has everything needed to connect to a building or
                    utility network. It is incredibly easy to install, integrate and maintain.</p>
                </div>
            </div>
        </div>
    </div>


    <div class="item bullets is-consumer">
        <div class="pin-wrapper">
            <div class="image"></div>
            <div class="list text-block">  
                <ul>      
                    <li style="margin-left: 0px;" class="hide-bullet"><h4>FEATURES</h4></li>                                  
                    <li>Ultra high efficiency</li>
                    <li>High performance in any climate</li>
                    <li>Modular, flexible and scalable</li>
                    <li>Smart energy management</li>
                    <li>Multi grid support functions</li>
                    <li>Innovative demand response software</li>
                    <li>Reliable, field proven technology</li>
                    <li>Compatible with different storage technologies</li>
                </ul>
            </div>
        </div>
    </div>
</section>
</div>

SCSS:

.services-types .item {
    height: 100vh;
    position: relative;
}

.scrollmagic-pin-spacer {
    position: absolute !important;
    clip: rect(auto, auto, auto, auto);
    width: 100%;
    height: 100% !important;
}

.pin-wrapper {
    height: 100%;
 }



.services-types-web .item.is-business .image {
    background-image: url("images/container-cutout.svg");
    top: 50%;
    margin-top: -200px;
    width: 50%;
    height: 463px;
    position: absolute;
    background-size: 100%;
    background-position: center center;
    background-repeat: no-repeat;
}

.services-types-web .item.is-consumers .image {
    background-image: url("images/container-cutout.svg");
    top: -50%;
    margin-top: -200px;
    width: 50%;
    height: 463px;
    position: absolute;
    background-size: 100%;
    background-position: center center;
    background-repeat: no-repeat;
}

.services-types-web .item.is-consumer .image {
    background-image: url("images/container-cutout.svg");
    top: -50%;
    margin-top: -200px;
    width: 50%;
    height: 463px;
    position: absolute;
    background-position: center center;
    background-size: 100%;
   background-repeat: no-repeat;
}


.title {
    color: #3f434a;
    position: absolute;
    top: 50%;
    left: 70%;
    transform: translate(-50%, -50%);
    text-transform: uppercase;
    font-weight: 600;
    width: 600px;
    font-size: 55px;
    text-align: center;
    h3 {
        font-size: 70px
    } 
}

.titles {
    color: #3f434a;
    position: absolute;
    top: -44%;
    left: 70%;
    transform: translate(-50%, -50%);
    font-size: 18px;
    text-align: left;
    width: 40%;
}

.list {
    position: absolute;
    top: -50%;
    left: 71.5%;
    transform: translate(-50%, -50%);
    font-size: 22px;
    text-align: left;
    width: 40%;
}

.list li {
   margin-bottom: 12px;
   margin-left: 18px;
}

我也使用滚动魔法来控制滚动变化，但我不认为这是导致问题的原因，但如果有人认为是我也可以包含该代码。

Answer 1

这是我发现的:

1. 我测试了您的网站，发现“图像”元素和“边缘隐藏图像”元素在 Edge 中执行不正确:当“item is-business”的文本“关于 DRM 系统”出现时，第一个“图像” “显示良好，然后第一个元素文本消失，“元素是消费者”的第二个文本 block 变为其最大不透明度，第一个“图像”元素仍然可见，而第二个包装的第二个“边缘隐藏图像”是不可见的，同样，第三项的“边缘隐藏图像”也是不可见的。
2. 我还在 Chrome 中测试了网站，它以不同的方式工作:当第一个元素文本消失并且“item is-consumers”的第二个文本 block 变为其最大不透明度时，第一个“图像”元素变得不可见第二个包装的第二个“边缘隐藏图像”以及第三个元素的“边缘隐藏图像”变得可见。
3. Edge 与 JavaScript 可能存在一些兼容性问题。您能否分享您的 js 源文件，尤其是“sitea45afa79f7f3c8c24697.js”？