Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS animation overflows the div

I have next code ( the borders should be shown, i don't know why they dissapeared in demo ), the screen is separated in 8 equal parts and on each part should be ripple effect. All works fine in Chrome, Mozzila, Opera, Safari, but ripple overflows the element in IE. How can i fix it?

$(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;
        }

        a.menu_button > .menu_button_content > .menu_button_color_rectangle {
            padding: 0;
            width: 40px;
            height: 3px;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
        }

            a.menu_button > .menu_button_content > .menu_button_color_rectangle#residence {
                background-color: #74dbce;
            }

            a.menu_button > .menu_button_content > .menu_button_color_rectangle#citizenship {
                background-color: #509194;
            }

            a.menu_button > .menu_button_content > .menu_button_color_rectangle#forillegals {
                background-color: #ff7662;
            }

            a.menu_button > .menu_button_content > .menu_button_color_rectangle#soonillegals {
                background-color: #ffd869;
            }

            a.menu_button > .menu_button_content > .menu_button_color_rectangle#fastsearch {
                background-color: #7b8dd8;
            }

            a.menu_button > .menu_button_content > .menu_button_color_rectangle#cooperation {
                background-color: #bb5b91;
            }

            a.menu_button > .menu_button_content > .menu_button_color_rectangle#aboutapp {
                background-color: #a29994;
            }

            a.menu_button > .menu_button_content > .menu_button_color_rectangle#settings {
                background-color: #f47b50;
            }

.ink {
    display: block;
    position: absolute;
    background: #006064;
    border-radius: 100%;
    transform: scale(0);
}
    /*animation effect*/
    .ink.animate {
        animation: ripple 0.65s linear;
    }

@keyframes ripple {
    /*scale the element to 250% to safely cover the entire link and fade it out*/
    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>
                <a class="ol-md-6 menu_button" id="#">
                    <div class="border_overlay"></div>
                    <div class="menu_button_content">
                        <h2 id="CitizenshipText">
                            <asp:Literal runat="server" Text="<%$ Resources: Strings, Citizenship %>" />
                        </h2>
                        <div class="menu_button_color_rectangle" id="citizenship"></div>
                    </div>
                </a>
                <a class="ol-md-6 menu_button" id="#">
                    <div class="border_overlay"></div>
                    <div class="menu_button_content">
                        <h2 id="FastSearchText">
                            <asp:Literal runat="server" Text="<%$ Resources: Strings, FastSearch %>" />
                        </h2>
                        <div class="menu_button_color_rectangle" id="fastsearch"></div>
                    </div>
                </a>
                <a class="ol-md-6 menu_button" id="#">
                    <div class="border_overlay"></div>
                    <div class="menu_button_content">
                        <h2 id="CooperationText">
                            <asp:Literal runat="server" Text="<%$ Resources: Strings, Cooperation %>" />
                        </h2>
                        <div class="menu_button_color_rectangle" id="cooperation"></div>
                    </div>
                </a>
                <a class="ol-md-6 menu_button" id="#">
                    <div class="border_overlay"></div>
                    <div class="menu_button_content">
                        <h2 id="ForIllegalsText">
                            <asp:Literal runat="server" Text="<%$ Resources: Strings, ForIllegals %>" />
                        </h2>
                        <div class="menu_button_color_rectangle" id="forillegals"></div>
                    </div>
                </a>
                <a class="ol-md-6 menu_button" id="#">
                    <div class="border_overlay"></div>
                    <div class="menu_button_content">
                        <h2 id="SoonIllegalsText">
                            <asp:Literal runat="server" Text="<%$ Resources: Strings, SoonIllegals %>" />
                        </h2>
                        <div class="menu_button_color_rectangle" id="soonillegals"></div>
                    </div>
                </a>
                <a class="ol-md-6 menu_button" id="#">
                    <div class="border_overlay"></div>
                    <div class="menu_button_content">
                        <h2 id="AboutAppText">
                            <asp:Literal runat="server" Text="<%$ Resources: Strings, AboutApp %>" />
                        </h2>
                        <div class="menu_button_color_rectangle" id="aboutapp"></div>
                    </div>
                </a>
                <a class="ol-md-6 menu_button" id="Settings">
                    <div class="border_overlay"></div>
                    <div class="menu_button_content">
                        <h2 id="SettingsText">
                            <asp:Literal runat="server" Text="<%$ Resources: Strings, Settings %>" />
                        </h2>
                        <div class="menu_button_color_rectangle" id="settings"></div>
                    </div>
                </a>
            </div>
like image 821
Cheese Avatar asked Oct 22 '15 06:10

Cheese


1 Answers

it is because your have a display:table on your a.menu_buttom. replace this by display:block. works fine for me with ie

$(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: block;
    border-collapse: collapse;
    text-decoration: none;
    color: black;
    position:relative;
    overflow:hidden;
    cursor:pointer;
}

    a.menu_button > .menu_button_content {
        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;
        }

        a.menu_button > .menu_button_content > .menu_button_color_rectangle {
            padding: 0;
            width: 40px;
            height: 3px;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
        }

            a.menu_button > .menu_button_content > .menu_button_color_rectangle#residence {
                background-color: #74dbce;
            }

            a.menu_button > .menu_button_content > .menu_button_color_rectangle#citizenship {
                background-color: #509194;
            }

            a.menu_button > .menu_button_content > .menu_button_color_rectangle#forillegals {
                background-color: #ff7662;
            }

            a.menu_button > .menu_button_content > .menu_button_color_rectangle#soonillegals {
                background-color: #ffd869;
            }

            a.menu_button > .menu_button_content > .menu_button_color_rectangle#fastsearch {
                background-color: #7b8dd8;
            }

            a.menu_button > .menu_button_content > .menu_button_color_rectangle#cooperation {
                background-color: #bb5b91;
            }

            a.menu_button > .menu_button_content > .menu_button_color_rectangle#aboutapp {
                background-color: #a29994;
            }

            a.menu_button > .menu_button_content > .menu_button_color_rectangle#settings {
                background-color: #f47b50;
            }

.ink {
    display: block;
    position: absolute;
    background: #006064;
    border-radius: 100%;
    transform: scale(0);
}
    /*animation effect*/
    .ink.animate {
        animation: ripple 0.65s linear;
    }

@keyframes ripple {
    /*scale the element to 250% to safely cover the entire link and fade it out*/
    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>
                <a class="ol-md-6 menu_button" id="#">
                    <div class="border_overlay"></div>
                    <div class="menu_button_content">
                        <h2 id="CitizenshipText">
                            <asp:Literal runat="server" Text="<%$ Resources: Strings, Citizenship %>" />
                        </h2>
                        <div class="menu_button_color_rectangle" id="citizenship"></div>
                    </div>
                </a>
                <a class="ol-md-6 menu_button" id="#">
                    <div class="border_overlay"></div>
                    <div class="menu_button_content">
                        <h2 id="FastSearchText">
                            <asp:Literal runat="server" Text="<%$ Resources: Strings, FastSearch %>" />
                        </h2>
                        <div class="menu_button_color_rectangle" id="fastsearch"></div>
                    </div>
                </a>
                <a class="ol-md-6 menu_button" id="#">
                    <div class="border_overlay"></div>
                    <div class="menu_button_content">
                        <h2 id="CooperationText">
                            <asp:Literal runat="server" Text="<%$ Resources: Strings, Cooperation %>" />
                        </h2>
                        <div class="menu_button_color_rectangle" id="cooperation"></div>
                    </div>
                </a>
                <a class="ol-md-6 menu_button" id="#">
                    <div class="border_overlay"></div>
                    <div class="menu_button_content">
                        <h2 id="ForIllegalsText">
                            <asp:Literal runat="server" Text="<%$ Resources: Strings, ForIllegals %>" />
                        </h2>
                        <div class="menu_button_color_rectangle" id="forillegals"></div>
                    </div>
                </a>
                <a class="ol-md-6 menu_button" id="#">
                    <div class="border_overlay"></div>
                    <div class="menu_button_content">
                        <h2 id="SoonIllegalsText">
                            <asp:Literal runat="server" Text="<%$ Resources: Strings, SoonIllegals %>" />
                        </h2>
                        <div class="menu_button_color_rectangle" id="soonillegals"></div>
                    </div>
                </a>
                <a class="ol-md-6 menu_button" id="#">
                    <div class="border_overlay"></div>
                    <div class="menu_button_content">
                        <h2 id="AboutAppText">
                            <asp:Literal runat="server" Text="<%$ Resources: Strings, AboutApp %>" />
                        </h2>
                        <div class="menu_button_color_rectangle" id="aboutapp"></div>
                    </div>
                </a>
                <a class="ol-md-6 menu_button" id="Settings">
                    <div class="border_overlay"></div>
                    <div class="menu_button_content">
                        <h2 id="SettingsText">
                            <asp:Literal runat="server" Text="<%$ Resources: Strings, Settings %>" />
                        </h2>
                        <div class="menu_button_color_rectangle" id="settings"></div>
                    </div>
                </a>
            </div>
like image 119
P. Frank Avatar answered Sep 28 '22 02:09

P. Frank