IE / Edge 滚动问题

Question

我在 Edge 中遇到滚动问题，

好像和base元素有粘性有关

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

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

但是，如果我将 wrapper 元素更改为 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 中的“image”元素和“edge-hide image”元素执行不正确：当出现“item is-business”的文本“ABOUT THE DRM SYSTEM”时，第一个“image” " 显示良好，然后第一个项目文本消失并且“项目是消费者”的第二个文本块变为最大不透明度，第一个“图像”元素仍然可见，而第二个包装器的第二个“边缘隐藏图像”是不可见的，同样，第三项的“边缘隐藏图像”也是不可见的。
2. 我还在 Chrome 中测试了该网站，它以不同的方式工作：当第一个项目文本消失并且“项目是消费者”的第二个文本块变为最大不透明度时，第一个“图像”元素变得不可见并且第二个包装的第二个“边缘隐藏图像”变得可见，以及第三个项目的“边缘隐藏图像”。
3. Edge 与 JavaScript 可能存在一些兼容性问题。您能否分享您的 js 源文件，尤其是“sitea45afa79f7f3c8c24697.js”？