research.google - The blue line overlaps the text

[annygakh]

URL: https://research.google/pubs/pub48285/

Browser / Version: Firefox 82.0
Operating System: Mac OS X 10.15
Tested Another Browser: Yes Chrome

Problem type: Design is broken
Description: Items are misaligned
Steps to Reproduce:
The blue bar that shows up in the middle of the headline is supposed to be underneath, on top of the gray bar.

View the screenshot

Browser Configuration

• None

From webcompat.com with ❤️

[annygakh]

The result is the same with and without Fission enabled.

[cipriansv]

Thanks for the report.

I was indeed able to reproduce the issue. The blue line overlaps the text.

Tested with:
Browser / Version: Firefox Nightly 83.0a1 (2020-09-21), Chrome 85.0.4143.121
Operating System: macOS 10.15.6

This is the web page displayed in Firefox Nightly:

And this is the web page displayed in Chrome:

Moving the issue to needsdiagnosis.

[karlcow]

The blue line should be on top of the gray line indeed.

The gray line

.hero .hero-meta::after {
	background: #dadce0;
	bottom: 0;
	content: "";
	height: 3px;
	left: 0;
	opacity: 1;
	position: absolute;
	width: 100%;
}

The blue line

.hero .hero-meta__wrapper .hero__title .wrap::after {
	position: absolute;
	height: 3px;
	content: "";
	left: 0;
	right: 0;
	color: #000;
	background-color: #1a73e8;
	bottom: -14px;
	z-index: 2;
	width: 100%;
}

This bottom: -14px; is likely to fail depending on fonts, etc.

That said this is an interesting issue on where this line is being drawn with regards to the box wrapping. It deserves a test case.

https://codepen.io/webcompat/pen/VwaNmyq

Rendering in Safari and Chrome

Rendering in Firefox

[karlcow]

Close as duplicate of https://bugzilla.mozilla.org/show_bug.cgi?id=1667725

[karlcow]

So I filed an issue on bugzilla. and Maybe this is interesting for @dholbert too.

[dholbert]

I left some comments on the bugzilla bug report. Thanks!

[ksy36]

The site has changed their design, and the issue is gone.