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

Posted 2023-02-25

【中文标题】将剪辑路径应用于父元素会导致子元素的动画不稳定

【英文标题】：Applying clip-path to parent causes shaky animations to child elements

【发布时间】：2017-03-31 15:05:52

【问题描述】：

目前，我在 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);
 

【参考方案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>

【讨论】：

感谢您的意见，我有一种直觉认为浏览器支持是罪魁祸首。你的代码很棒！我对其进行了一些修改，它就像一个魅力。非常感谢您的帮助。

@cheyneosy 如果答案对您有价值，请考虑支持/接受它