admin管理员组文章数量:1417414
I implemented a bootstrap 4 carousel as a feature on a drupal platform. This carousel is working perfectly fine on chrome but on safari, the carousel would do the transition to the next slide but would blink once and then continue to the next slide (there's a set interval time). Originally I thought it had something to do with the B4 crossfade class so I removed that but the blinking is still occurring. I wish I could add a video to show you how it looks exactly, but the description will do for now. Below is a snippet of the html css and js. Is there a known way to fix the glitch?
Thanks in advance!
Jemma
<!--bootstrap CSS-->
<link rel="stylesheet" href=".0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!--Boostrap JS-->
<script src=".2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src=".js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src=".0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<style>
/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
/* Carousel base class */
.carousel {
margin-bottom: 4rem;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption p {
z-index: 10;
bottom: 3rem;
color: black;
}
/* Declare heights because of positioning of img element */
.carousel-item {
height: 16rem;
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
height: 100px;
width: 100px;
outline: black;
background-image: none;
}
.carousel-control-next-icon:after
{
content: '\25b6';
font-size: 55px;
color: black;
/*font-weight: bold;*/
font-family: "Trebuchet MS", Helvetica, sans-serif;
}
.carousel-control-prev-icon:after {
content: '\25C0';
font-size: 55px;
color: black;
/*font-weight: bolder;*/
font-family: "Trebuchet MS", Helvetica, sans-serif;
}
/* Changes the color of the indicators */
#myCarousel .carousel-indicators li
{
background: #808080;
}
#myCarousel .carousel-indicators .active
{
background: #333333;
}
.carousel-indicators
{
margin-bottom: -20px;
}
.title{
font-size: 25px;
font-style: italic;
}
</style>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<div class="container">
<div class="carousel-caption d-none d-md-block">
<p class="title">Title</p>
<p>Thursday, November 29, 2018</p>
<a href=" " target="__blank"><button class="btnCarousel">Learn More</button></a>
</div>
</div>
</div>
<div class="carousel-item">
<div class="container">
<div class="carousel-caption d-none d-md-block">
<p class="title">Title</p>
<p>Thursday, November 29, 2018 - 11:00am to 1:30pm</p>
<a href=" " target="__blank"><button class="btnCarousel">Learn More</button></a>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<script>
// When the DOM is ready, run this function
$(document).ready(function() {
//Set the carousel options
$('#myCarousel').carousel({
pauseOnHover: true,
interval: 5000
});
});
</script>
I implemented a bootstrap 4 carousel as a feature on a drupal platform. This carousel is working perfectly fine on chrome but on safari, the carousel would do the transition to the next slide but would blink once and then continue to the next slide (there's a set interval time). Originally I thought it had something to do with the B4 crossfade class so I removed that but the blinking is still occurring. I wish I could add a video to show you how it looks exactly, but the description will do for now. Below is a snippet of the html css and js. Is there a known way to fix the glitch?
Thanks in advance!
Jemma
<!--bootstrap CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!--Boostrap JS-->
<script src="https://code.jquery./jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<style>
/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
/* Carousel base class */
.carousel {
margin-bottom: 4rem;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption p {
z-index: 10;
bottom: 3rem;
color: black;
}
/* Declare heights because of positioning of img element */
.carousel-item {
height: 16rem;
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
height: 100px;
width: 100px;
outline: black;
background-image: none;
}
.carousel-control-next-icon:after
{
content: '\25b6';
font-size: 55px;
color: black;
/*font-weight: bold;*/
font-family: "Trebuchet MS", Helvetica, sans-serif;
}
.carousel-control-prev-icon:after {
content: '\25C0';
font-size: 55px;
color: black;
/*font-weight: bolder;*/
font-family: "Trebuchet MS", Helvetica, sans-serif;
}
/* Changes the color of the indicators */
#myCarousel .carousel-indicators li
{
background: #808080;
}
#myCarousel .carousel-indicators .active
{
background: #333333;
}
.carousel-indicators
{
margin-bottom: -20px;
}
.title{
font-size: 25px;
font-style: italic;
}
</style>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<div class="container">
<div class="carousel-caption d-none d-md-block">
<p class="title">Title</p>
<p>Thursday, November 29, 2018</p>
<a href=" " target="__blank"><button class="btnCarousel">Learn More</button></a>
</div>
</div>
</div>
<div class="carousel-item">
<div class="container">
<div class="carousel-caption d-none d-md-block">
<p class="title">Title</p>
<p>Thursday, November 29, 2018 - 11:00am to 1:30pm</p>
<a href=" " target="__blank"><button class="btnCarousel">Learn More</button></a>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<script>
// When the DOM is ready, run this function
$(document).ready(function() {
//Set the carousel options
$('#myCarousel').carousel({
pauseOnHover: true,
interval: 5000
});
});
</script>
3 Answers
Reset to default 4With some help of a friend, the not-so-obvious solution to this blinking is to simply add
-webkit-transform: translateZ(0); -moz-transform: translateZ(0);
into the css of the container within container-inner. Not exactly sure why it is the solution to the glitch in safari, but it solved the problem!
Add CSS in Custom.css or style.css
body{
overflow-x: hidden;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
}
fixed the blinking (but the slide animation from right to left will not work - slides just appear):
.carousel-item {
-webkit-transform: translateZ(0); -moz-transform: translateZ(0);
}
本文标签： javascriptBootstrap 4 Carousel is blinking during transitions on safari browserStack Overflow
版权声明：本文标题：javascript - Bootstrap 4 Carousel is blinking during transitions on safari browser - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745257155a2650170.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论