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

Question

When the my H1 title text wraps a line, the text-stroke correctly appears on the next line down, but the background-image: linear-gradient( AND color: #b6a571; Begin off the page, seemingly with a massive negative margin-left, only the end of the text just overlapping with the correctly placed text-stroke, outline. It's a really weird glitch.

I've tried a couple of things, instead of a line break between 'JK Rowling's' & 'Edinburgh...'

1. I tried putting width: 15ch on the H1 tag, the line breaks, but the problem persists.
2. I have another page on my website with a similarly styled title, which works correctly, I've examined it and can't see any difference.

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>

Here's the live page.

I'd love it working, or an explanation of the shortcomings of Safari so I can choose an optimum alternative.

Answer 1

Well seemingly the h1 styling was making it fall apart, Safari can't reconcile applying h1 styles then the class dropcap, so the dropcap shimmer effect become detached from the text outline.

So I cut and pasted all the h1 styling into my .dropcap class. Changed the h1s in the media queries to .dropcap, and it worked, no more glitching.

Conclusion: Safari likes simplified CSS, so try simplifying inheritance.