Bootstrap carousel controls not properly clickable in IE9 #16796

Closed
Cellcote opened this Issue Jul 9, 2015 · 8 comments

Projects

None yet

4 participants

@Cellcote
Cellcote commented Jul 9, 2015

So I have included a Bootstrap carousel in my website and I'm creating my own controls for going to the next slide. When I tried to check if the controls were working in IE9, I found something strange. The clickable area for the control was gone. I checked the default controls if the same thing occurred, and it did. To be more concrete, I made some screenshots.

In Safari, Chrome and IE11, this is what's happening and what is desired: screenshot
Here the red area is the area in which the click will trigger the next slide. The left side is my own control, right side is the default glyphicon.

In IE9, this will happen: screenshot

Is there a quick fix for this?

@cvrebert
Member
cvrebert commented Jul 9, 2015

@Cellcote Please confirm that you're using Bootstrap v3.3.5.
X-Ref: #11186

@Cellcote

I just upgraded to Bootstrap v3.3.5 and this issue is still happening.

@cvrebert
Member

@Cellcote Please post a JS Bin or JS Fiddle that demonstrates the problem.

@cvrebert cvrebert added confirmed and removed awaiting reply labels Jul 10, 2015
@cvrebert
Member

Nevermind, confirmed using http://getbootstrap.com/examples/carousel/

@Cellcote

A jsfiddle is here

Inspired by the issue linked, i managed to fix this by adding the following css:

a.carousel-control {
        background-color: rgba(0,0,0,0);
}

This solution works in IE9, but does not work in IE8

@twbs-lmvtfy
Member

Hi @Cellcote!

You appear to have posted a live example (https://fiddle.jshell.net/DTcHh/9789/show/light/), which is always a good first step. However, according to Bootlint, your example has some Bootstrap usage errors, which might potentially be causing your issue:

  • line 15, column 7: W013: Bootstrap version might be outdated. Latest version is at least 3.3.4 ; saw what appears to be usage of Bootstrap 3.0.0

You'll need to fix these errors and post a revised example before we can proceed further.
Thanks!

(Please note that this is a fully automated comment.)

@cvrebert cvrebert added the v3 label Aug 19, 2015
@mdo
Member
mdo commented Nov 15, 2015

We can fix the IE9 part, but calling IE8 a won't fix since the suggested fixes in the linked MDN document for IE8 reference nuking the opacity as the only way. That kind of defeats the point though—if it's invisible, there's literally nothing to click on 😁.

@mdo mdo added this to the v3.3.6 milestone Nov 15, 2015
@mdo mdo closed this in #18252 Nov 15, 2015
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment