Html 如何处理macOs safari溢出：隐藏；问题

我已经制作了动画滚动到向上按钮。当用户将鼠标悬停在按钮上时，向上箭头动画将在按钮一侧播放。我添加了溢出：隐藏；按钮区域外侧隐藏溢出箭头动画的代码。这种方法适用于chrome、opera和firefox。但在按钮箭头之外，动画不会隐藏在macOs safari上。如何在macOs safari上将箭头动画隐藏在按钮区域之外

Sass（Scss）

向上箭头

这是解决方案，我已经为您简化了一点语法

这是您的SCS，代码段有其编译形式

// 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;
  }
}

@关键帧向上移动{
从{
转换：translateY（4rem）；
}
到{
transform:translateY（-4rem）；
}
}
*,
*：：之后，
*：：之前{
保证金：0；
填充：0；
框大小：继承；
}
html{
字体大小：62.5%；
框大小：边框框；
}
身体{
字体大小：400；
线高：1.6；
背景色：#dee2e6；
}
.包装纸{
位置：相对位置；
高度：30雷姆；
宽度：30雷姆；
顶部：1rem；
左：10雷姆；
背景色：#7A8288；
}
.滚动\u顶部\u btn{
显示：块；
文本对齐：居中；
位置：绝对位置；
底部：3rem；
右：3rem；
}
.scroll\u top\u btn、.scroll\u top\u btn:链接、.scroll\u top\u btn:已访问{
显示器：flex；
弯曲方向：行；
柔性包装：nowrap；
对齐项目：居中；
证明内容：中心；
光标：指针；
不透明度：0.4；
背景色：#e9ecef；
身高：4.5雷姆；
宽度：4.5雷姆；
显示：块；
边界半径：5px；
过渡：all.2s；
边界：无；
溢出：隐藏；
}
.滚动\u顶部\u btn:悬停{
transform:translateY（-5px）；
不透明度：0.9；
}
.scroll\u top\u btn:活动，.scroll\u top\u btn:焦点{
大纲：无；
转换：translateY（-1px）；
}
.滚动\u顶部\u btn-图标{
转换：translateY（0.8rem）；
高度：2.5雷姆；
宽度：2.5雷姆；
填写：#000；
滤镜：投影（0.5px2pRGBA（0,0,0,0.5））；
}
。滚动\u顶部\u btn：悬停。滚动\u顶部\u btn-图标{
动画：向上移动。5s线性无限；
}

向上箭头

这就是答案。谢谢。

// 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;
  }
}