Created attachment 188399 [details] broken SUMMARY The "KDE HID Guidelines" page and the "develop.kde.org" have non-working CSS in non-Firefox browsers: - https://develop.kde.org/hig/ - https://develop.kde.org/ More pages could be affected but this is just a starting point. STEPS TO REPRODUCE Go to the URLs listed above in Chrome, Brave or Safari. OBSERVED RESULT Broken CSS on Chrome / Brave / Safari - https://imgur.com/ME7sTaf EXPECTED RESULT The page should render like in Firefox: https://imgur.com/lAIo5RN SOFTWARE Bug does not happen in Firefox, but on Chromium-based based browsers and Safari.
Created attachment 188400 [details] correct
The page renders correctly for me on Brave / Linux. Please ensure you have an up to date Chromium based browser. Note that Safari is generally behind so if it works fine in a modern Chromium based browser (Chrome itself, Brave, etc) then there probably isn't much for us to fix here.
No, it's an issue with the KDE "icon" font being used. The glyphs in the font have completely wrong scaling, causing a massive "padding" when used with a "3em" font size in the CSS. Some browsers "normalize" the glyph bbox, others don't. I am already on the latest Chrome version (Version 143.0.7499.193, latest "stable" according to Googles Blog), that's not the issue. I downloaded the KDE icon font from: https://cdn.kde.org/breeze-icons/icons.woff2?97f5747e2a469f732e46da072e2119de (extracted from the Network panel). Then I used https://fontdrop.info/ to see the differences against a "regular" font like Roboto. The KDE icons font has very tiny glyphs: https://imgur.com/a/gpTotBh The Roboto Light font has "normal" glyphs: https://imgur.com/a/mbruI2q So, some browsers may "normalize" the width and calculate the height, but there's clearly something wrong with the icon font.