Safari浏览器上的过渡期间，Bootstrap 4 Carousel闪烁 [英] Bootstrap 4 Carousel is blinking during transitions on safari browser
问题描述
我在drupal平台上实现了bootstrap 4轮播功能.该转盘在chrome上运行良好，但在safari上，该转盘会过渡到下一张幻灯片，但会闪烁一次，然后继续到下一张幻灯片(有固定的间隔时间).最初我以为它与B4淡入淡出类有关，所以我删除了它，但是闪烁仍在发生.我希望我可以添加一个视频来向您展示它的外观，但现在就可以进行介绍.以下是html css和js的代码段.有已知的方法可以解决故障吗?
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?
提前谢谢！
杰玛
<!--bootstrap CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!--Boostrap JS-->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/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>
推荐答案
在朋友的帮助下，这种闪烁的不太明显的解决方案是简单地添加
With 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);
-webkit-transform: translateZ(0); -moz-transform: translateZ(0);
进入容器内部的容器的css中.不确定为什么可以解决野生动物园中的小故障，但是可以解决问题！
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!
这篇关于Safari浏览器上的过渡期间，Bootstrap 4 Carousel闪烁的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
