Almanac.httparchive.org: header::after background causing phantom glitches

Created on 23 Jul 2020  路  1Comment  路  Source: HTTPArchive/almanac.httparchive.org

Manipulating the page zoom causes a phantom bar to appear sometimes. In the screenshot below it appears in the middle of the featured chapter section when setting the zoom to 75%:

almanac httparchive org_en_2019_ (1)

I've traced it to the header::after style.

https://github.com/HTTPArchive/almanac.httparchive.org/blob/496a03b09d60ae021cb364d7ec2e63c0a58ad7d3/src/static/css/index.css#L20-L31

@bazzadp any ideas how to mitigate this?

bug development good first issue
Source
picture rviscomi

Most helpful comment

To be honest we could probably just drop this. It was added in an abundance of caution in case the SVG didn't load as then had white text on white background which was obviously unreadable. But as it's base64 encoded to be inlined to the CSS, and as SVG has great support, it's very unlikely it won't be loaded. And the main header.alt-bg class has a couple of fallbacks anyway.

picture bazzadp on 23 Jul 2020
👍2

>All comments

To be honest we could probably just drop this. It was added in an abundance of caution in case the SVG didn't load as then had white text on white background which was obviously unreadable. But as it's base64 encoded to be inlined to the CSS, and as SVG has great support, it's very unlikely it won't be loaded. And the main header.alt-bg class has a couple of fallbacks anyway.

bazzadp picture bazzadp on 23 Jul 2020
👍2
Was this page helpful?
0 / 5 - 0 ratings

Related issues

rviscomi picture rviscomi  路  5Comments
rviscomi picture rviscomi  路  5Comments
rviscomi picture rviscomi  路  6Comments
bazzadp picture bazzadp  路  3Comments
rviscomi picture rviscomi  路  6Comments