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; } ```
<rdar://problem/102793416>
Created attachment 463800 [details] rendering in safari, firefox, chrome
The bug can be reproduced in Safari 16.1
Created attachment 463801 [details] samplified test case The issue happens only with ' + lowercase letter hat tip: Cameron McCormack
Created attachment 463824 [details] testing all ascii characters This is happening for all prefix ASCII characters which are not a letter.