У меня проблема с прокруткой в Edge,
Похоже, это связано с тем, что базовый элемент липкий
Вот ссылка на сайт 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;
}
Я также использую магию прокрутки для управления изменениями прокрутки, но я не думаю, что это вызывает проблемуно если кто-то думает, что это так, я тоже могу включить этот код.