Icon click event inside bootstrap carousel not firing in Chrome but ok in IE

Question

I have a bootstrap carousel with images. Inside each image I have a font awesome icon for a trash can in the upper right corner. In IE I can click and trigger the trash can event, but in Chrome and Edge it seems like the trash can is behind the carousel flippers. Why is it different in different browsers and how can I fix it so the trash can click event is fired in all browsers?

Here is my js fiddle and the code

 <div id="profile-carousel" class="carousel slide" data-interval="false" style="width: 225px; height: 225px !important;"> <div class="carousel-inner" role="listbox"> @if (hasImage) { for (int i = 0; i < imageCount; i++) { var isMainImage=M odel.ProfilePhotoViewModel.YogaProfileImages.ElementAt(i).IsMainImage; <div id=@Model.ProfilePhotoViewModel.YogaProfileImages.ElementAt(i).YogaProfileImageId class="item @(isMainImage == true ? " active " : " ") profile-image"> <img class="img-responsive" style="position: relative; left: 0; top: 0;" src="data:image/jpg;base64, @(Html.Raw(Convert.ToBase64String(Model.ProfilePhotoViewModel.YogaProfileImages.ElementAt(i).ImageThumbnailCropped)))" alt="profile image"> <i style="z-index: 200; position: absolute; top: 5px; right: 5px; color: whitesmoke;" class="fa fa-trash-o fa-2x"></i> <i style="z-index: 200; position: absolute; top: 5px; right: 35px; color: yellow;" class="fa @(isMainImage == true ? " fa-star " : "fa-star-o ") fa-2x"></i> </div> } } else { <div class="item active profile-image"> <img class="img-responsive" style="position: relative; left: 0; top: 0; border: 1px solid #ddd; border-radius: 6px; border-image: none;" src="~/Images/no_image.jpg" alt="no profile image"> </div> } </div> <!-- Controls --> <a style="visibility: @visible; border-radius: 6px;" class="left carousel-control" href="#profile-carousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a style="visibility: @visible; border-radius: 6px;" class="right carousel-control " href="#profile-carousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> 

Answer 1

i already updated your fiddle, just add

top: auto; bottom: 50%;

for overwriting carousel-control class styling, like this

<a style="top: auto; bottom: 50%; visibility: visible; border-radius: 6px;" class="left carousel-control" href="#profile-carousel" role="button" data-slide="prev">

check the update http://jsfiddle.net/r2wLz6xr/412/