Weird H1 behavior on hover

Hi,

I'm seeing a strange issue with mouseover/hover on H1 blocks on a client's page (video attached).

When you hover over the text, the expected result is for each of the H1s (Idealism, Integrity, Imagination) to transition to a different color, which it does. But what you can see in the video is that each hover is also producing some weird additional blocks (extending the uppercase "I"s, the height of the periods, producing a line just over "m" and first "a" in "Imagination".

The client is using LESS for their CSS, but the class that controls this section is nothing too complicated:

.right-text-container {
  margin-top: -2vw;

  h1 {
    font-family: "Helvetica Neue";
    font-weight: bold;
    margin: 0;
    .font-size(84 * @PT);
    .line-height(97 * @PT);
    text-align: right;
    letter-spacing: -0.025em;
    cursor: pointer;
    transition: color 0.25s ease-in-out;

    &.hover:nth-child(1):hover {
      color: #839b99 !important;
    }
    &.hover:nth-child(2):hover {
      color: #d3b64f !important;
    }
    &.hover:nth-child(3):hover {
      color: #c84d26 !important;
    }
  }
}

Another couple strange things:

• It seems to only happen in Google Chrome
• It only happens over a certain desktop with (if I reduce the width of the browser window, it goes away)

Has anyone seen something like this before?

Thanks!

You should give the url so we can check