How can i handle macOs safari overflow:hidden; problem - html

Question

I've made animated scroll to up button. When user hover on the button, up arrow animation plays in side of the button. I've add overflow:hidden; code for hidden overflowed arrow animation out side the button area. This approach works on chrome, opera, firefox. But outside the button arrow animation don't hide on macOs safari. How can i hide arrow animation out side the button area on macOs safari.
Sass(Scss)
// COLOR VARIABLES
$color-white: #fff;
$color-gray-100: #f8f9fa;
$color-gray-200: #e9ecef;
$color-gray-300: #dee2e6;
$color-gray-400: #ced4da;
$color-gray-500: #999;
$color-gray-600: #7A8288;
$color-gray-700: #52575C;
$color-gray-800: #3A3F44;
$color-gray-900: #272B30;
$color-black: #000;
$sidebar_opacity: 0.9;
#mixin flex-vCenter($justify-content:center) {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: $justify-content;
}
////////////////// Animation //////////////////
#keyframes move_up {
from {
transform: translateY(4rem);
}
to {
transform: translateY(-4rem);
}
}
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: inherit;
}
html {
// This defines what 1rem is
font-size: 62.5%; //1 rem = 10px; 10px/16px = 62.5%
box-sizing: border-box;
}
body {
font-weight: 400;
line-height: 1.6;
background-color: $color-gray-300;
}
.wrapper{
position: relative;
height: 50rem;
width: 50rem;
top:1rem;
left:10rem;
background-color: $color-gray-600;
& &__scroll_top {
position: absolute;
bottom: 3rem;
right: 3rem;
}
}
.scroll_top__btn {
&,
&:link,
&:visited {
#include flex-vCenter;
cursor: pointer;
opacity: $sidebar_opacity - .5;
background-color: $color-gray-200;
height: 4.5rem;
width: 4.5rem;
display: block;
border-radius: 5px;
transition: all .2s;
//Change for the <button> element
border: none;
overflow:hidden;
}
&:hover {
transform: translateY(-5px);
opacity: $sidebar_opacity;
}
&:active,
&:focus {
outline: none;
transform: translateY(-1px);
}
&-icon{
height: 2.5rem;
width: 2.5rem;
fill: $color-gray-900;
filter: drop-shadow( 0 5px 2px rgba($color-black, .5));
}
&:hover &-icon{
animation: move_up .5s linear infinite;
}
}
#keyframes move_up {
from {
transform: translateY(4rem);
}
to {
transform: translateY(-4rem);
}
}
*, *::after, *::before {
margin: 0;
padding: 0;
box-sizing: inherit;
}
html {
font-size: 62.5%;
box-sizing: border-box;
}
body {
font-weight: 400;
line-height: 1.6;
background-color: #dee2e6;
}
.wrapper {
position: relative;
height: 50rem;
width: 50rem;
top: 1rem;
left: 10rem;
background-color: #7a8288;
}
.wrapper .wrapper__scroll_top {
position: absolute;
bottom: 3rem;
right: 3rem;
}
.scroll_top__btn, .scroll_top__btn:link, .scroll_top__btn:visited {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0.4;
background-color: #e9ecef;
height: 4.5rem;
width: 4.5rem;
display: block;
border-radius: 5px;
transition: all 0.2s;
border: none;
overflow: hidden;
}
.scroll_top__btn:hover {
transform: translateY(-5px);
opacity: 0.9;
}
.scroll_top__btn:active, .scroll_top__btn:focus {
outline: none;
transform: translateY(-1px);
}
.scroll_top__btn-icon {
height: 2.5rem;
width: 2.5rem;
fill: #272b30;
filter: drop-shadow(0 5px 2px rgba(0, 0, 0, .5));
}
.scroll_top__btn:hover .scroll_top__btn-icon {
animation: move_up 0.5s linear infinite;
}
<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="icon-arrow-up" viewBox="0 0 32 32">
<title>arrow-up</title>
<path d="M16 1l-15 15h9v16h12v-16h9z"></path>
</symbol>
</defs>
</svg>
<div class="wrapper">
<div class="wrapper__scroll_top">
<button class="scroll_top__btn" type="button">
<svg class="scroll_top__btn-icon">
<use xlink:href="#icon-arrow-up" />
</svg>
</button>
</div>
</div>

Answer 1

Here's the solution, I've simplified the syntax for you a little bit
This is your SCSS, the code snippet has its compiled form
// COLOR VARIABLES
$color-white: #fff;
$color-gray-100: #f8f9fa;
$color-gray-200: #e9ecef;
$color-gray-300: #dee2e6;
$color-gray-400: #ced4da;
$color-gray-500: #999;
$color-gray-600: #7A8288;
$color-gray-700: #52575C;
$color-gray-800: #3A3F44;
$color-gray-900: #272B30;
$color-black: #000;
$sidebar_opacity: 0.9;
#mixin flex-vCenter($justify-content:center) {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: $justify-content;
}
////////////////// Animation //////////////////
#keyframes move_up {
from {
transform: translateY(4rem);
}
to {
transform: translateY(-4rem);
}
}
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: inherit;
}
html {
// This defines what 1rem is
font-size: 62.5%; //1 rem = 10px; 10px/16px = 62.5%
box-sizing: border-box;
}
body {
font-weight: 400;
line-height: 1.6;
background-color: $color-gray-300;
}
.wrapper{
position: relative;
height: 30rem;
width: 30rem;
top:1rem;
left:10rem;
background-color: $color-gray-600;
}
.scroll_top__btn {
display: block;
text-align: center;
position: absolute;
bottom: 3rem;
right: 3rem;
&,
&:link,
&:visited {
#include flex-vCenter;
cursor: pointer;
opacity: $sidebar_opacity - .5;
background-color: $color-gray-200;
height: 4.5rem;
width: 4.5rem;
display: block;
border-radius: 5px;
transition: all .2s;
border: none;
overflow:hidden;
}
&:hover {
transform: translateY(-5px);
opacity: $sidebar_opacity;
}
&:active,
&:focus {
outline: none;
transform: translateY(-1px);
}
&-icon{
transform: translateY(0.8rem);
height: 2.5rem;
width: 2.5rem;
fill: $color-black;
filter: drop-shadow( 0 5px 2px rgba($color-black, .5));
}
&:hover &-icon{
animation: move_up .5s linear infinite;
}
}
#keyframes move_up {
from {
transform: translateY(4rem);
}
to {
transform: translateY(-4rem);
}
}
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: inherit;
}
html {
font-size: 62.5%;
box-sizing: border-box;
}
body {
font-weight: 400;
line-height: 1.6;
background-color: #dee2e6;
}
.wrapper {
position: relative;
height: 30rem;
width: 30rem;
top: 1rem;
left: 10rem;
background-color: #7A8288;
}
.scroll_top__btn {
display: block;
text-align: center;
position: absolute;
bottom: 3rem;
right: 3rem;
}
.scroll_top__btn, .scroll_top__btn:link, .scroll_top__btn:visited {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0.4;
background-color: #e9ecef;
height: 4.5rem;
width: 4.5rem;
display: block;
border-radius: 5px;
transition: all .2s;
border: none;
overflow: hidden;
}
.scroll_top__btn:hover {
transform: translateY(-5px);
opacity: 0.9;
}
.scroll_top__btn:active, .scroll_top__btn:focus {
outline: none;
transform: translateY(-1px);
}
.scroll_top__btn-icon {
transform: translateY(0.8rem);
height: 2.5rem;
width: 2.5rem;
fill: #000;
filter: drop-shadow(0 5px 2px rgba(0, 0, 0, 0.5));
}
.scroll_top__btn:hover .scroll_top__btn-icon {
animation: move_up .5s linear infinite;
}
<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="icon-arrow-up" viewBox="0 0 32 32">
<title>arrow-up</title>
<path d="M16 1l-15 15h9v16h12v-16h9z"></path>
</symbol>
</defs>
</svg>
<div class="wrapper">
<a href="javascript:void;" class="scroll_top__btn" type="button">
<svg class="scroll_top__btn-icon">
<use xlink:href="#icon-arrow-up" />
</svg>
</a>
</div>