将剪辑路径应用于父元素会导致子元素的动画不稳定

Question

目前，我在 css 中遇到了一个带有 clip-path 属性的奇怪错误。我正在应用多边形剪辑路径在我正在为我的工作开发的这个登陆页面上创建一个有角度的部分。问题是，每当我应用剪辑路径时，此父容器内的任何具有转换的子元素都会变得不稳定。我已经打开/关闭了该属性，并且由于某种原因，每当我删除了 clip-path 属性时，动画又变得流畅了？

Click to view my jsfiddle

下面是html和css：

---

HTML

<header class="gs_hero">
 <div class="container-fluid">
    <div class="row">
        <section class="gs_hero_contents">
            <div class="gs_hero_callout">
                <h1>Getting Started</h1>
                <p>7 Steps To Setting Up Your Artwork</p>
                <button class="gs_lm_btn" id="gs_lm_btn">Learn More</button>
            </div>
        </section>
    </div>
 </div>
</header>

CSS

.gs_hero {
  background: url(../img/custom_journey_header.jpg) no-repeat;
  background-position: 0 60%;
  background-size: cover;
  position: relative;
  padding-bottom: 100px;
  -webkit-clip-path: polygon(0 0, 1600px 0, 1600px 70%, 0 100%);
  clip-path: polygon(0 0, 1600px 0, 1600px 70%, 0 100%);
  transition: -webkit-clip-path 0.35s, clip-path 0.35s;
}
.gs_hero:before {
  content: "";
  display: block;
  background-color: rgba(130, 29, 33, 0.75);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.gs_hero_contents {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.gs_hero_contents h1 {
  font-size: 25px;
  font-weight: 800;
  margin: 0;
  text-transform: uppercase;
}
.gs_hero_contents p {
  font-size: 19px;
  margin: 8px auto;
}
.gs_hero_callout {
  color: rgba(255, 255, 255, 1);
  text-align: center;
  margin: 60px auto 0;
}
.gs_lm_btn {
  background-color: rgba(236, 54, 66, 1);
  border: none;
  border-radius: 38px;
  color: rgba(255, 255, 255, 1);
  font-size: 17px;
  font-weight: 900;
  text-transform: uppercase;
  outline: none;
  margin: 15px auto 0;
  padding: 12px;
  width: 160px;
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  -webkit-transition: box-shadow 425ms ease, opacity 425ms ease, 
  transform 425ms ease;
  -moz-transition: box-shadow 425ms ease, opacity 425ms ease, transform 
  425ms ease;
  -o-transition: box-shadow 425ms ease, opacity 425ms ease, transform 
  425ms ease;
 }
 .gs_lm_btn:hover {
    box-shadow: 0 33px 35px -10px rgba(0,0,0,0.15);
    opacity: 0.8;
    transform: translateY(2px);
 }

Answer 1

由于它似乎无法与 clip-path 一起正常工作，并且由于 clip-path 的浏览器支持不佳，因此一种解决方法是使用 transform: skew 创建倾斜/倾斜的底部

/*********************************************************************
- overrides
*********************************************************************/
body {
    font-family: 'Source Sans Pro','Helvetica Neue',Helvetica,Arial,sans-serif;
}
h1,h2,h3,h4,h5,h6 {
    font-family: 'Source Sans Pro','Helvetica Neue',Helvetica,Arial,sans-serif;
}
h2 {
    margin: 0;
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.content {
    padding: 0;
    /*min-height: 4000px;*/
}
.content-wrapper {
    background-color: rgba(255,255,255,1);
}
/*********************************************************************
- gs hero parent
*********************************************************************/
.gs_hero {
    background: url(../img/custom_journey_header.jpg) no-repeat;
    background-position: 0 60%;
    background-size: cover;
    position: relative;
    padding-bottom: 100px;
    overflow: hidden;
}
.gs_hero:before {
    content: "";
    display: block;
    background-color: rgba(130, 29, 33, 0.75);
    position: absolute;
    transform: skewY(-3deg);
    top: -50%;
    left: 0;
    width: 100%;
    height: 130%;
}
/*********************************************************************
- gs hero contents
*********************************************************************/
.gs_hero_contents {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    /*margin: 10vh auto;*/
}
.gs_hero_contents h1 {
    font-size: 25px;
    font-weight: 800;
    margin: 0;
    text-transform: uppercase;
}
.gs_hero_contents p {
    font-size: 19px;
    margin: 8px auto;
}
.gs_hero_callout {
    color: rgba(255, 255, 255, 1);
    text-align: center;
    margin: 60px auto 0;
}
.gs_lm_btn {
    background-color: rgba(236, 54, 66, 1);
    border: none;
    border-radius: 38px;
    color: rgba(255, 255, 255, 1);
    font-size: 17px;
    font-weight: 900;
    text-transform: uppercase;
    outline: none;
    margin: 15px auto 0;
    padding: 12px;
    width: 160px;
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    -webkit-transition: box-shadow 425ms ease, opacity 425ms ease, transform 425ms ease;
    -moz-transition: box-shadow 425ms ease, opacity 425ms ease, transform 425ms ease;
    -o-transition: box-shadow 425ms ease, opacity 425ms ease, transform 425ms ease;
}
.gs_lm_btn:hover {
    box-shadow: 0 33px 35px -10px rgba(0,0,0,0.15);
    opacity: 0.8;
    transform: translateY(2px);
}

<header class="gs_hero">
	<div class="container-fluid">
		<div class="row">
			<section class="gs_hero_contents">
				<div class="gs_hero_callout">
					<h1>Getting started</h1>
					<p>7 Steps To Setting Up Your Artwork</p>
					<button class="gs_lm_btn" id="gs_lm_btn">Learn More</button>
				</div>
			</section>
		</div>
	</div>
</header>