html - 我如何处理 macOs safari 溢出 :hidden; problem

Question

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

萨斯(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

这是解决方案，我为您简化了语法

这是你的 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: 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>