Bug 248510 – The name of the fonts is displayed over the title, only with `font-variant: small-caps`and apostrophe + lowercase letter

• Status: NEW
• Component: CSS

[Karl Dubost]

Created attachment 463799 [details]
simplified test case

Previously opened on https://github.com/webcompat/web-bugs/issues/114873

Steps to reproduce.
1. Open the test case or go to https://gameofthrones.fandom.com/wiki/Jaqen_H%27ghar

Expected:
Title is "Jaqen H'ghar"

Actual:
Title is an overlap of "Jaqen H'ghar" and "Game of Thrones"


The funny thing is that this is happening only when `font-variant: small-caps` is active.
The CSS is 

```
     @font-face {
        font-family: "Game of Thrones";
        src: url(https://static.wikia.nocookie.net/gameofthrones/images/c/c0/Game_of_Thrones.woff2)
          format("woff2");
      }

      @font-face {
        font-family: "Trajan";
        src: url(https://static.wikia.nocookie.net/gameofthrones/images/b/b3/Trajan_Pro_Regular.woff2)
          format("woff2");
      }

      :root {
        --standard-font-family: "Game of Thrones", "Trajan";
        --theme-page-headings-font: "Game of Thrones", "Trajan";
      }

      h1 {
        font-family: var(--standard-font-family);
        font-variant: small-caps;
      }
```

[Radar WebKit Bug Importer]

<rdar://problem/102793416>

[Karl Dubost]

Created attachment 463800 [details]
rendering in safari, firefox, chrome

[Karl Dubost]

The bug can be reproduced in Safari 16.1

[Karl Dubost]

Created attachment 463801 [details]
samplified test case

The issue happens only with 

' + lowercase letter

hat tip: Cameron McCormack

[Karl Dubost]

Created attachment 463824 [details]
testing all ascii characters

This is happening for all prefix ASCII characters which are not a letter.