www.theverge.com - The first letter of the first paragraph overlaps the text

[webcompat-bot]

URL: https://www.theverge.com/c/23290332/nokia-ringtones-music-history

Browser / Version: Firefox 103.0
Operating System: Windows 10
Tested Another Browser: Yes Edge

Problem type: Design is broken
Description: Items are overlapped
Steps to Reproduce:
The first letter of the article is rendered incorrectly causing it to overlap with the second row of text, this does not happen in edge.

View the screenshot

Browser Configuration

• None

From webcompat.com with ❤️

[softvision-oana-arbuzov]

Thanks for the report, I was able to reproduce the issue.

Affected area:

<p>One of the internet’s better-known ringtone archivists was barely alive to witness the golden age of his biggest hobby. The 20-year-old Scottish musician, who prefers to be known by his online handle Fusoxide, got hooked through an Alcatel flip phone he had as a kid. “I love the sound of old ringtones, partly due to nostalgia and partly because I think there’s genuine underlooked gems,” he says. Today, Fusoxide is behind the popular <a href="https://twitter.com/ringtonebangers">@ringtonebangers</a> Twitter account. With others, like <a href="https://twitter.com/OldPhonePreserv">@OldPhonePreserv</a>, he helps to maintain Andre Louis’ <a href="http://onj3.andrelouis.com/phonetones/">phonetones</a> directory — a repository of phone software, sound banks, ringtones, and audio ephemera from a bygone era.&nbsp;
</p>

Note: The issue is not reproducible on Chrome.

Tested with:
Browser / Version: Firefox Nightly 105.0a1 (2022-08-15), Firefox Release 103.0.2
Operating System: Windows 10 Pro

Moving to Needsdiagnosis for further investigation.

[qa_33/2022]

[wisniewskit]

In this case, the O drop-cap is actually a background SVG image (with a low-resolution JPEG in that SVG via data URL, for whatever reason):

article .text-container.first p:first-child:first-letter {
    font-size: 4.8em;
    font-family: "Nokia Cellphone FC";
    float: left;
    margin: -9px 7px -25px 0;
    color: transparent;
    background-image: url(https://cdn.vox-cdn.com/csk/04bb20ca-f9ee-45a9-a561-4e01f457ca6d/7dcac30f-033e-4a44-accb-09b85cef577a/images/dropcap.svg);
    background-position: left 0.65rem;
    background-repeat: no-repeat;
    background-size: contain;
}

I don't really understand why they're doing all of this. Presumably they found some kind of interop issue on another browser engine or device, and tried to work around it? In my testing they could just as easily drop the background image and hide-the-text and awkward negative margins and just do this:

article .text-container.first p:first-child:first-letter {
    font-size: 4.8em;
    font-family: "Nokia Cellphone FC";
    float: left;
    line-height:1;
    // and optionally nudge the margin-top up/down if desired
}

To me the actual font's 'O' looks a lot nicer compared to the low resolution JPG version in the SVG being blown up like this, but then I'm not a graphics designer, so I'll stick to my own
strengths :)

At any rate, from Firefox's perspective this almost certainly boils down to bug 1376061 and probably also involves general negative margin interop issues between WebKit/Blink and Firefox. It would be nice to contact them and find out why they're not doing things the easier, more interoperable way, but at least we can easily reset those styles in a site patch, if desired.

[webcompat-bot]

Generate outreach template