I've created a simple slideshow with a progress bar that functions as a 5-second timer before moving to the next slide. However, there's a strange black section on the progress bar in Chrome that I can't figure out. Here you can view the code in action...
https://codepen.io/Matiny/pen/pGEXGa
Check out a screen clipping of the issue here...
A brief overview of what you're currently observing...
The slideshow consists of 4 bars with absolute positioning. They expand and become visible through a function that adds a class every 5 seconds.
I'm aware that I could change scaleX(50) to width: 50%, but that might use more browser resources.
In order to provide more context, here is my code snippet along with the CodePen link...
HTML
<div class="container">
<div class="row align-items-md-center justify-content-md-start justify-content-center">
<div class="slideshow shadow col-6">
<figure>
<img src="https://queentessence.io/static/img/icons/back-button.svg" alt="left arrow" class="back-arrow">
<img src="https://queentessence.io/static/img/icons/front-button.svg" alt="right arrow" class="front-arrow">
<div class="slide-bg">
<div class="service-image">
<i class="material-icons play-button">play_arrow</i>
<i class="material-icons pause-button play-pause">pause</i>
<img src="https://queentessence.io/static/img/icons/analytics.png" alt="" class="icon-1 slide-animate">
<img src="https://queentessence.io/static/img/icons/security.png" alt="" class="icon-2">
<img src="https://queentessence.io/static/img/icons/dashboard.png" alt="" class="icon-3">
<img src="https://queentessence.io/static/img/icons/customize.png" alt="" class="icon-4">
</div>
</div>
<figcaption>
<h3 class="name text-center">Advanced Analytics</h3>
<div class="all-bars">
<div class="load-bar bar1"></div>
<div class="load-bar bar2"></div>
<div class="load-bar bar3"></div>
<div class="load-bar bar4"></div>
</div>
<p class="description text-center"></p>
<a href="#">
<div class="btn-group-toggle text-center feature-button">
<button class="btn btn-yes bg-light-1">
READ MORE <i class="material-icons">
arrow_forward
</i>
</button>
</div>
</a>
</figcaption>
</figure>
</div>
</div>
</div>
SCSS
@import url('https://fonts.googleapis.com/css?family=Mukta:700');
@mixin positions($number1, $number2) {
position: absolute;
left: $number1;
top: $number2;
transform: translate(-$number1,-$number2);
}
.slideshow {
position: relative;
margin-top: 2.5%;
}
.slideshow figure {
height: 100%;
width: 35vw;
margin...
jQuery
// The script controlling the slideshow
$(".bar4").addClass("full-bar");
var slider;
var modular = "Drag and drop tiles to customize your dashboard's stats.";
var secure = "Gain the tools to keep your network secure and properly tracked.";
var splash = "Effortlessly update your venue's splash page with our simple page editor.";
var analytics = "Work with a variety of data to better suit your business.";
function slideForward() {
$(".pause-button").addClass("play-pause").siblings("i").removeClass("play-pause");
$(".bar1").hasClass("full-bar") ?
changeSlide(".icon-2", "Modular Dashboard", modular, ".bar2") :
$(".bar2").hasClass("full-bar") ?
changeSlide(".icon-3", "Powerful Splash Page Editor", splash, ...