Bootstrap carousel white space issue

JavaScript
, ,
1

When I view my carousel on the iPhone in portrait orientation only, it has white space between each image. I’ve tried answers from other similar questions but none have worked.

Here is my test site: http://dexydemo.com/test/ where you can see this issue if you have an iPhone.

CSS:

#slidercontainer {
  max-width:100%;
	margin:0 auto 0 !important;
}

/*   ********************************* CAROUSEL *************************************************** */


.carousel-indicators {
	display:none;
}
	
.carousel-inner .item {
  max-height: 680px;
}

.carousel-inner .item:after {
  content: "";
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.carousel-control {
  width: 10%;
  color:#fff !important;
}

.carousel-control .fa {
  position: absolute;
  top: 50%;
  z-index: 5;
  display: inline-block;
}
.carousel-control .fa.fa-chevron-right {
  right: 50%;
  margin-right: -10px;
}



/* ************************** Slider caption ************************** */

.carousel-caption {
   top: 16%;
}
  
.carousel-caption h2 {
  color: #fff;
  font-family:Oswald;
  font-size: 4.0vw;
  font-weight:700;
  margin-bottom: 20px;
  text-transform: uppercase;
}

.carousel-caption p {
  font-family: Roboto;
  font-weight: 500;
  font-size: 2.5vw;
  margin-bottom: 2.5vw;
}

/**
 * Change animation duration
 */
.animated {
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
}

@media only screen and (min-width:1241px) and (max-width: 1440px) {
	
.carousel-caption {
	top:13% !important;

}	
}

@media only screen and (min-width:1111px) and (max-width: 1240px) {

.carousel-caption {
	top:10% !important;

}	
}

@media only screen and (min-width:891px) and (max-width: 1110px) {

.carousel-caption {
	top:5%;
}
}


@media only screen and (min-width:751px) and (max-width: 890px) {

.carousel-control .fa-chevron-left {
   margin-left:50% !important;
}

.carousel-control .fa.fa-chevron-right {
  right: 50% !important;
  margin-right: -10px !important;
}
	
.carousel {
    width:110% !important;
	overflow: hidden !important;
	right:10% !important;
}

.carousel-caption {
	top:-3% !important;
	right:8% !important;
}
  
.carousel-caption h2 {
  font-size: 6.2vw !important;
   margin-bottom: 15px !important;
}

.carousel-caption p {
  font-size: 4.5vw !important;
  margin-bottom: 4.8vw !important;
}

}


@media only screen and (min-width:550px) and (max-width: 750px) {

.carousel-control .fa-chevron-left {
   margin-left:50% !important;
}

.carousel-control .fa.fa-chevron-right {
  right: 50% !important;
  margin-right: -10px !important;
}
	
.carousel {
    width:110% !important;
	overflow: hidden !important;
	right:10% !important;
}

.carousel-caption {
	top:0 !important;
	right:8% !important;
}
  
.carousel-caption h2 {
  font-size: 5.0vw !important;
   margin-bottom: 15px !important;
}

.carousel-caption p {
  font-size: 4.5vw !important;
  margin-bottom: 4.8vw !important;
}

}

@media only screen and (min-width:421px) and (max-width: 549px) {
	
.carousel-control .fa-chevron-left {
   margin-left:150% !important;
}

.carousel {
    width:130% !important;
	overflow: hidden !important;
	right:30% !important;
}

.carousel-caption {
	top:0% !important;
	right:-10% !important;
}
  
.carousel-caption h2 {
  font-size: 4.8vw !important;
   margin-bottom: 15px !important;
}

.carousel-caption p {
  font-size: 4.5vw !important;
  margin-bottom: 4.8vw !important;
}

}

@media only screen and (min-width:321px) and (max-width: 420px) {

.carousel-control .fa-chevron-left {
   margin-left:150% !important;
}

.carousel {
    width:130% !important;
	overflow: hidden !important;
	right:30% !important;
}

.carousel-caption {
	top:-13% !important;
	right:-10% !important;
}

.carousel-caption h2 {
  font-size: 4.8vw !important;
   margin-bottom: 15px !important;
}

.carousel-caption p {
  font-size: 4.3vw !important;
  margin-bottom: 4.8vw !important;
}

}

@media screen and (max-width: 320px){
	
.carousel-control .fa-chevron-left {
   margin-left:150% !important;
}

.carousel {
    width:130% !important;
	overflow: hidden !important;
	right:30% !important;
}

.carousel-caption {
	top:-18% !important;
	right:-10% !important;
}

  
.carousel-caption h2 {
  font-size: 4.8vw !important;
   margin-bottom: 15px !important;
}

.carousel-caption p {
  font-size: 4.5vw !important;
  margin-bottom: 4.8vw !important;
}

}


HTML:


<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css" rel="stylesheet"/>
<div id="slidercontainer">

<div class="carousel slide" id="img-carousel" data-ride="carousel">

  <ol class="carousel-indicators">
    <li class="active" data-target="#img-carousel" data-slide-to="0"></li>
    <li data-target="#img-carousel" data-slide-to="1"></li>
    <li data-target="#img-carousel" data-slide-to="2"></li>
    <li data-target="#img-carousel" data-slide-to="3"></li>
  </ol>

  <div class="carousel-inner" role="listbox">
  
      <div class="item active"><img src="http://dexydemo.com/test/images/001.jpg" alt="">
      <div class="carousel-caption">
        <h2 class="animated fadeInDown">Personal Injury Lawyers</h2>
        <p class="animated fadeInUp">Call</p>
        <p class="animated fadeInUp">FREE CASE REVIEW</p>
      </div>
    </div>

    <div class="item"><img src="http://dexydemo.com/test/images/002.jpg" alt="">
      <div class="carousel-caption">
        <h2 class="animated fadeInDown">We&#8217;ll Fight To Get You Money </h2>
        <p class="animated fadeInUp">Call</p>
        <p class="animated fadeInUp">FREE CASE REVIEW</p>
      </div>
    </div>

    <div class="item"><img src="http://dexydemo.com/test/images/003.jpg" alt="">
      <div class="carousel-caption">
        <h2 class="animated fadeInDown">You Pay No Fee Unless We Win</h2>
        <p class="animated fadeInUp">Call</p>
        <p class="animated fadeInUp">FREE CASE REVIEW</p>
      </div>
    </div>
    
  </div>

<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
</div>
</div>

Any help would be appreciated.

Thanks.

2

Hi,

The white line seems to be caused by this rule:

.carousel {
     width:130% !important; 
     overflow: hidden !important; 
     right:30% !important; 
}

You have that in the @media only screen and (min-width:321px) and (max-width: 420px) rule and in the @media screen and (max-width: 320px) rule.

Change it to this in both places:

.carousel {
     width:100% !important; 
     overflow: hidden !important; 
     right:0 !important; 
}

Then adjust the caption in both places to this:

.carousel-caption {
right:0 !important;
left:0!important;
}

Leave the ‘top’ properties as they were in those rules.

As an aside you have too many !importants there which only complicates the issues further.

And those two media queries are silly because if you hadn’t limited the first one to 321px min-width you would have only needed 2 rules in the 320px media query

@media screen and (max-width: 320px){
	.carousel-caption {top:-18% !important;}
	.carousel-caption p {font-size: 4.5vw !important;}
}
3

Unfortunately, your recommendations did not work…still showing the white space between image transitions on my iPhone 6s. Thank you.

4

Is it a cache issue? Mobiles are notorious for holding onto cached files.

It looks ok to me in the emulator and looks ok on my old iphone 4 (well as good as you can expect for an old phone) :slight_smile:

5

Actually I borrowed someone’s newer phone and I can see a white space appearing after the image has slid across. It’s just a flash and then it’s gone.

My first thought was that perhaps the images need to be preloaded but even on a second cycle the flash is evident.

The iphone 4 on the other hand is fine.

I’m not on a computer at the moment so can’t do more tests but I will take another look in the morning if no one else has jumped in.

Also I note that you are not putting the natural width and height attributes into the image html so the browser has to load the image first before it can work out the aspect ratio to resize it (which you do in the css). If you supply width and height attributes it speeds up that process even if you are later resizing with css.

6

I didn’t see any white lines using Safari iPad, but it did seem that the images were reloading even though they had been shown before. (Not cached?)

1 Like
7

The white space between images ONLY occurs for me when using an iPhone 6s (have not tested on iPhone 7) in portrait orientation only. Does not appear to be a caching issue. It does not occur on my Windows 7 PC (Firefox, Chrome & IE11). Tried it on my old iPhone 4S and it just flashes the white space momentarily between images. Have not yet tried it on my old iPad 2 because it is recharging, but will take a look when it’s charged.

Here’s a link to someone else’s Bootstrap Carousel and it does the exact same thing on iPhone 6s, although at first it just flashes the white space momentarily, but after cycling through the second time, the white space displays for longer, just like on my carousel:

https://blackrockdigital.github.io/startbootstrap-full-slider/

Thank you all.

8

On my old iPad 2, IOS 9.3.2, it does indeed show the white space, but initially, just as a flash of white, then as it cycles through the images, longer periods of white space between the images…so frustrating.

10

You don’t seem to have added my recommendations about the image width and height attributes being required. With problems like this you need to be thorough and try one thing at a time until the problem goes away or you decide its a bug. It may make no difference but as a general rule you should always include those attributes as the browser can use them to work out the images aspect ration before the image has loaded. Otherwise it has to load the image first and then work out the aspect ratio and then resize it with css.

Add the correct naturalwidth and height attributes to the images in the slider. You may also want to pre-load those images with js also just to make sure they are cached before the slideshow calls them.

Another possible bottleneck is the custom fonts so after you have tried the above and if no change is seen try removing the custom fonts just to see if there is an issue there somewhere.

If all else fails you could supply a dark background behind the images so the white flash isn’t evident. Or ditch bootstrap and use a better slider :slight_smile:

11

hy jjsmithaz12

Everytime a new slide comes into the Carousel, it has a small white space under under it as it slides, when it gets to the resting area in the middle, it quickly shoots down to settle where it should. The white space only seems to be about 10-15px, but it happens on every slide.

I am using the default Carousel with Bootstrap. This is my code, not sure if it is having an issue here or elsewhere.

    <ol class="carousel-indicators">
        <li data-target="#theCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#theCarousel" data-slide-to="1"></li>
        <li data-target="#theCarousel" data-slide-to="2"></li>
        <li data-target="#theCarousel" data-slide-to="3"></li>
    </ol>

    <div class="row">
        <div class="carousel-inner">
            <div class="item active">
                <img src="img/berwick5.jpg" alt="1" class="img-responsive"/>
            </div>
            <div class="item ">
                <img src="img/pic3_e.jpg" alt="2" class="img-responsive"/>
            </div>
            <div class="item ">
                <img src="img/pic1_e.jpg" alt="3" class="img-responsive"/>
            </div>
            <div class="item ">
                <img src="img/pic2_e.jpg" alt="4" class="img-responsive"/>
            </div>
        </div>
    </div>
</div>
12

Your link didn’t seem to have a slider on it at all so I removed it. Apologies if I missed it.

Are you needing help with this question because from the SO link it seems the problem is solved?

However it does not seem related at all to the issue in this thread anyway so am a little confused if you want help or were offering your solution as a possible fix to this thread?

Please also do not ask people to not reply to this thread but to go to SO instead. If you want to help then do it here but you can of course link to other sites that may help should it be needed.

13

OK I’ve spent the last few hours on this and I’ve narrowed the problem down and the bug seems to be evident in the default bootstrap carousel.

Specifically in the bootstrap.css they use this code sequence.

@media all and (transform-3d), (-webkit-transform-3d) {
.carousel-inner>.item {
	-webkit-transition:-webkit-transform .6s ease-in-out;
	-o-transition:-o-transform .6s ease-in-out;
	transition:transform .6s ease-in-out;
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
	-webkit-perspective:1000;
	perspective:1000
}
.carousel-inner>.item.active.right, .carousel-inner>.item.next {
	left:0;
	-webkit-transform:translate3d(100%, 0, 0);
	transform:translate3d(100%, 0, 0)
}
.carousel-inner>.item.active.left, .carousel-inner>.item.prev {
	left:0;
	-webkit-transform:translate3d(-100%, 0, 0);
	transform:translate3d(-100%, 0, 0)
}
.carousel-inner>.item.active, .carousel-inner>.item.next.left, .carousel-inner>.item.prev.right {
	left:0;
	-webkit-transform:translate3d(0, 0, 0);
	transform:translate3d(0, 0, 0)
}
}

If the above code is removed then there is no white flash as the image slides as it reverts to a transition using the left property instead of translate3D (which is why my old iphone4 was working ok).

The problem with removing that code is that translate creates a far smoother slide than using the left property so if you remove it then everyone gets the jerkier slide (albeit with no white space).

It must be a bug in ios but it may also be tied to the bootstrap css and js as usually translate works well.

I’ve done some more tests and it also seems to be linked to the overflow:hidden on the carousel-inner and if you change it to visible then it again seems to be ok.


.carousel-inner{overflow:visible}

Obviously you can only do that as long as the carousel goes to the viewport edge otherwise you will see it as it slides away. It also assumes that you have consistent height images so that they don’t overflow vertically etc. If you are going to center the slider then perhaps you could add that rule in a media query for when its full width.

I can’t guarantee any of the above but I have tested thoroughly on separate demos. On the mac when you use open the web inspector the problem goes away which makes it even harder to debug :frowning:

1 Like
14

Thanks for the extensive testing, I really appreciate it. So, I guess there is not much I can do to correct this white space issue on iPhone 6s running IOS 10.2.1.

15

If your carousel is viewport width then try the overflow fix I mentioned above.

.carousel-inner{overflow:visible}

It might be worth just trying that fix anyway to see if it does fix the problem and then at least we know there is a partial fix for some instances. I’ve tested locally and it seems to work for me.

To be honest I think those sliding carousels are very distracting and a fade effect is much nicer and won’t show flashes on mobile. Here’s one I wrote years ago but is pretty basic.

16

In the http://dexydemo.com/test/carousel/bootstrap.min.css I implemented:

.carousel-inner {
position: relative;
width: 100%;
overflow: visible;
}

But to no avail…still shows the white space on my iPhone 6s.

17

Yes I can see the gap still I’m afraid. :frowning:

What’s really annoying is that if I copy your exact code to my local machine then the gap disappears but adding overflow:hidden makes it come back. This is the exact same code but just running locally but referencing all your files, css and images etc.

There is a bug filed for ios rendering with translate so hopefully the bug will go way in the future.

I’m sure there is a fix in there somewhere (apart form using left instead of translate as already mentioned) but I’m thwarted by the bug and by the fact that simply having the safari devtools open causes better rendering anyway!

1 Like
18

Well, that bug filed was from 2014, so I’m not holding my breath, but at least I know there is nothing I can do about this issue. I really do appreciate your effort. Thank you so much.

1 Like
20

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.