在 Safari 上为图像设置动画背景颜色时断断续续

Question

我正在尝试为图像制作 background-color 动画。它适用于任何 browser/OS 组合，除了 macOS 上的 Safari。我不知道这个问题是否有解决方法或解决方案，但我在搜索 SO 或 Google.

时找不到任何相关信息

下面是一个例子，你应该在 Safari 上试试。对于我们这些没有 mac.

的人，您还会在其下方找到问题的 gif 动图

.container {
  width: 300px;
  height: 300px;
  position: relative;
}

.img {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -1;
  background-image: url('https://picsum.photos/300');
}

.img::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #AD00D2;
  opacity: 0.2;
  z-index: -1;
  -webkit-transition: opacity 0.4s, background-color 0.4s;
  -moz-transition: opacity 0.4s, background-color 0.4s;
  transition: opacity 0.4s, background-color 0.4s;
}

.container:hover .img::before {
  background-color: #AD00D2;
  opacity: 0.6;
}

.text {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  line-height: 1.2;
  padding: 2rem 0;
}

.text::before {
  display: block;
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: -moz-linear-gradient(280deg, #F12958, #AD00D2);
  background: linear-gradient(170deg, #F12958, #AD00D2);
  opacity: 0.8;
  z-index: -1;
}

<div class="container">
  <div class="img"></div>
  <div class="text">Text content</div>
</div>

Answer 1

我找到了一个非常简单的解决方案：删除 .text::before 规则并将其替换为 text 元素上的背景。

.container {
  width: 300px;
  height: 300px;
  position: relative;
}

.img {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -1;
  background-image: url('https://picsum.photos/300');
}

.img::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #AD00D2;
  opacity: 0.2;
  z-index: -1;
  -webkit-transition: opacity 0.4s, background-color 0.4s;
  -moz-transition: opacity 0.4s, background-color 0.4s;
  transition: opacity 0.4s, background-color 0.4s;
}

.container:hover .img::before {
  background-color: #AD00D2;
  opacity: 0.6;
}

.text {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  line-height: 1.2;
  padding: 2rem 0;
  background: -moz-linear-gradient(280deg, #F12958, #AD00D2);
  background: linear-gradient(170deg, #F12958, #AD00D2);
  opacity: 0.8;
}

<div class="container">
  <div class="img"></div>
  <div class="text">Text content</div>
</div>

在 Safari 上为图像设置动画背景颜色时断断续续

Animating the background color over an image on Safari is choppy

html

css

safari

css-animations