I've been testing my portfolio website (http://www.meades.org/Hazel-Portfolio/) on different browsers. The website landing page is designed for an image-specific caption to fade in and obscure the original image whenever the mouse hovers over the image. It seems to work on every browser I've tested so far except for Microsoft Edge. For some reason the blue caption block gets cut off at the bottom and inserted on top of the next image and I can't figure out why.
Here's the CSS I've applied to the images to get the effect:
.index-caption {
background-color: #75bff0;
color: black;
font-size: 16px;
padding-top: 25%;
opacity: 0;
transition: .5s ease;
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
transform: translate(-50%, -50%);
text-align: center;
display: inline-block;
}
.index-caption:hover {
opacity: 1;
}
And here's an example of that class style being applied to the html (I'm using the Bootstrap .card-columns class to group the images):
<div class="card">
<a href="EMP.html">
<img size="100%" height="100%" class="card-img-top" src="images/emp.png" alt="Ethnomusicology Major Project">
<div class="index-caption">
<h2>The Ideology of the Modern Concert Hall</h2>
<br>
<h4>Last updated: 5/10/19</h4>
</div>
</a>
</div>
I've done some trial and error CSS editing and think the issue might be to do with how the transform and/or display values operate in Microsoft Edge, but I'm not sure and am pretty far out of my coding depth at this point. Does anyone know why it's not working and/or have any advice on how to fix it?
I believe you have hit this bug -> https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/107210
Just add overflow: hidden; to .card-columns .card to work around this.
Also, there is no need for the transform as you have width and height at 100%. You could just have:
top: 0;
left: 0;
and no transform.