IE / Edge issue with scroll - css

Question

I have a problem with a scroll issue in Edge,
It seems that it has something to do with the base element being sticky
Here is the site link http://www.power-sonic.co.uk/drm/#section1
When you scroll it should show content to the right of the image, it works on all other browsers other than edge..
However if I change the wrapper element to position: sticky it works but its very laggy,
Is there a better fix and why would there be an issue with position relative in Edge (if thats even the issue).
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;
}
Im also using scroll magic to control the scroll changes but I don't think that is causing the issue but if anyone thinks its is I can include that code too.

Answer 1

here's what I found:
I tested your site and found the "image" element and the "edge-hide image" element perform incorrectly in Edge: When the text "ABOUT THE DRM SYSTEM" of "item is-business" appears, the 1st "image" shows well, then the 1st item text disappears and the 2nd text block of "item is-consumers" turns to its max opacity, the 1st "image" element is still visible while the 2nd "edge-hide image" of the 2nd wrapper is invisible, likewise, the 3rd item's "edge-hide image" is also invisible.
I also tested the site in Chrome, it works in a different way: When the 1st item text disappears and the 2nd text block of "item is-consumers" turns to its max opacity, the 1st "image" element becomes invisible and the 2nd "edge-hide image" of the 2nd wrapper becomes visible, as well as the 3rd item's "edge-hide image".
There may be some compatibility issue in Edge with JavaScript. Could you please share your js source files especially "sitea45afa79f7f3c8c24697.js"?