Safari CSS：我的 H1 标题中的换行符导致其 text-background 渐变与 H1 的 text-stroke 分离

Question

当我的 H1 标题文本换行时，text-stroke 正确出现在下一行，但是 background-image: linear-gradient( 和 color: #b6a571; 从页面开始，似乎有一个巨大的负面 margin-left，只有文本的结尾与正确放置的 text-stroke 轮廓重叠。这是一个非常奇怪的故障。

我尝试了一些方法，而不是在“JK Rowling's”和 'Edinburgh...'

之间换行

我试着把 width: 15ch 放在 H1 标签上，换行了，但是问题仍然存在。
我的网站上还有一个标题样式相似的页面，它工作正常，我已经检查过它，但看不到任何内容区别。

h1 {
  margin: 0;
  display: inline;
  line-height: unset;
  font-family: Times, "Times New Roman", Georgia, serif;
  letter-spacing: 0px;
  font-size: 9vw;
  line-height: 1.1em;
  font-weight: 600;
  position: absolute;
  margin-left: 6px;
  margin-top: -13.5vh;
  z-index: 99;
  /*color: #CBBE9A;
              -webkit-text-fill-color: #CBBE9A;
              -webkit-text-stroke-width: 1px;
              -webkit-text-stroke-color:#18111A;*/
}

@media screen and (min-width: 1025px) {
  h1 {
    font-size: 6em;
    line-height: 1em;
    margin-top: -19.7vh;
  }
}

.dropCap {
  /*margin: 0px; padding: 0px;*/
  -webkit-text-stroke: 0.6px rgb(32, 32, 32);
  background-image: -moz-linear-gradient(135deg, transparent 0 48%, hsla(0, 0%, 100%, .8) 50%, transparent 52% 100%), -moz-linear-gradient(45deg, #b6a571, #cdb373, #e7da9a);
  background-image: linear-gradient(-45deg, transparent 48%, hsla(0, 0%, 100%, .8) 50%, transparent 52% 100%), linear-gradient(45deg, #b6a571, #cdb373, #e7da9a);
  color: #b6a571;
  color: transparent;
  background-clip: text;
  background-size: 500% 500%, 100% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-animation: CapShimmer 12s ease 0.7s infinite;
  -moz-animation: CapShimmer 12s ease 0.7s infinite;
  animation: CapShimmer 12s ease 0.7s infinite;
}

@-webkit-keyframes CapShimmer {
  0% {
    background-position: 0 0
  }
  25% {
    background-position: 100% 100%
  }
  100% {
    background-position: 100% 100%
  }
}

@-moz-keyframes CapShimmer {
  0% {
    background-position: 0 0
  }
  25% {
    background-position: 100% 100%
  }
  100% {
    background-position: 100% 100%
  }
}

@keyframes CapShimmer {
  0% {
    background-position: 0 0
  }
  25% {
    background-position: 100% 100%
  }
  100% {
    background-position: 100% 100%
  }
}

<h1 style="width: 15ch"><span class="dropCap">JK Rowɬing’s Edinburgh&nbsp;Award</span></h1>

这是 live page。

我希望它能正常工作，或者解释 Safari 的缺点，以便我可以选择最佳替代方案。

Answer 1

看起来 h1 样式让它分崩离析，Safari 无法调和应用 h1 样式然后 class 首字下沉，因此首字下垂微光效果与文本轮廓分离。

所以我将所有 h1 样式剪切并粘贴到我的 .dropcap class 中。将媒体查询中的 h1 更改为 .dropcap，它起作用了，不再出现故障。

结论：Safari喜欢简化CSS，所以尝试简化继承。

Safari CSS：我的 H1 标题中的换行符导致其 text-background 渐变与 H1 的 text-stroke 分离

Safari CSS: line break in my H1 title causes its text-background gradient to detach from the H1's text-stroke

css

safari

background-image