I am encountering an issue with my code where the borders are not displaying as expected. The screen is divided into 8 equal parts, each of which should have a ripple effect. While everything works well in Chrome, Mozilla, Opera, and Safari, the ripple effect overflows the element in Internet Explorer. How can I resolve this problem?
$(document).ready(function () {
$(".button_line").on('click', ".menu_button", function (e) {
DoRipple($(this), e);
});
});
var parent, ink, d, x, y;
function DoRipple(parent, e) {
if (parent.find(".ink").length == 0) {
parent.prepend("<span class='ink'></span>");
}
ink = parent.find(".ink");
ink.removeClass("animate");
if (!ink.height() && !ink.width()) {
d = Math.max(parent.outerWidth(), parent.outerHeight());
ink.css({ height: d, width: d });
}
x = e.pageX - parent.offset().left - ink.width() / 2;
y = e.pageY - parent.offset().top - ink.height() / 2;
ink.css({ top: y + 'px', left: x + 'px' }).addClass("animate");
function removeAnimationClass() {
ink.removeClass("animate");
}
setTimeout(
function () {
ink.removeClass("animate");
}, 650);
}html, body{
height:100%;
width:100%;
margin:0;
padding:0;
}
.equal, .equal > div[class*='col-'] {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex: 1 0 auto;
}
.button_line {
height: 25%;
width: 100%;
}
a.menu_button {
width: 50%;
height: 100%;
float: left;
background-color: white;
display: table;
border-collapse: collapse;
text-decoration: none;
color: black;
position:relative;
overflow:hidden;
cursor:pointer;
}
a.menu_button > .menu_button_content {
display: table-cell;
vertical-align: middle;
}
a.menu_button > .border_overlay {
height:100%;
width:100%;
position:absolute;
border-right: 1px solid #E6F0F0;
border-bottom: 1px solid #E6F0F0;
}
a.menu_button > .menu_button_content > h2 {
text-align: center;
font-size: 1.1em;
font-family: 'Roboto', sans-serif;
font-weight: 400;
}
// Additional CSS properties...
.ink {
display: block;
position: absolute;
background: #006064;
border-radius: 100%;
transform: scale(0);
}
@keyframes ripple {
100% {
opacity: 0;
transform: scale(2.5);
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="button_line">
<a class="ol-md-6 menu_button" id="Residence">
<div class="border_overlay"></div>
<div class="menu_button_content">
<h2 id="ResidenceText">
<asp:Literal runat="server" Text="<%$ Resources: Strings, Residence %>" />
</h2>
<div class="menu_button_color_rectangle" id="residence"></div>
</div>
</a>
// Repeat for other menu items...
</div>