amazon.com - SVG logo is broken

[dholbert]

URL: https://amazon.com

Browser / Version: Firefox 95.0 Operating System: Linux Tested Another Browser: Yes Chrome

Problem type: Design is broken Description: Items are overlapped Steps to Reproduce: The "Amazon's Choice" SVG logo is broken, in Firefox-on-Linux. URL: https://m.media-amazon.com/images/G/01/amazonsChoice/acBadge-p13n.svg

If you view that in Firefox-on-Linux, the "s" in "Amazon's" overlaps the "C" of "Choice", and the final "c" and "e" overlap as well.

This seems to be because this SVG logo specifies precise placement of the text, without actually knowing what font will be used. And in Firefox-on-Linux, the font is slightly larger than they are expecting.

View the screenshot

Browser Configuration

• None

From webcompat.com with ❤️

[dholbert]

Here's a screenshot in Chrome on Linux, which happens to use a different font here and hence gets a slightly-better experience:

Still looks broken. though less-broken than Firefox-on-Linux -- there's some awkward space between "c" and "e" since the SVG markup puts them in separate individually-positioned tspan elements.

[dholbert]

Here's the markup of the SVG file in question:

<?xml version="1.0" encoding="UTF-8"?>
<svg width="109px" height="18px" viewBox="0 0 109 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>Group</title>
    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Group">
            <polygon id="Rectangle" fill="#002E36" points="0 0 109 0 99.9166667 18 0 18"></polygon>
            <text id="Amazon’s-Choice" font-family="AmazonEmber-Regular, Amazon Ember" font-size="12" font-weight="normal" letter-spacing="-0.400000006">
                <tspan x="8" y="13" fill="#FFFFFF">Amazon’s </tspan>
                <tspan x="59.6359999" y="13" fill="#FFA723">Choic</tspan>
                <tspan x="87.5279999" y="13" fill="#FFA723">e</tspan>
            </text>
        </g>
    </g>
</svg>

[dholbert]

On the live amazon.com site, I ran into this in the "More items to explore" section on this site (for items that are badged with "Amazon's Choice" in that section): https://www.amazon.com/DECKER-WM425-Portable-Project-Center/dp/B00PTX62Q4

Other places. e.g. at the top of an actual product page, Amazon uses inline HTML to draw that badge, rather than an external SVG image. And their inline HTML renders just fine - it's only their above-quoted SVG that has the issue (due to fragile dependency on exact placement of tspan elements, in the absence of knowledge of the exact font that will be used).

[dholbert]

Also, for what it's worth (for reproducing-the-bug purposes): I only see that "More items to explore" section if I'm logged in to Amazon. In Private Browsing Mode (where I'm not logged in), that section doesn't show up; and the other similar "carousel" sections don't have Amazon's Choice badges.

Here's a screenshot of the what this looks like, in that "More items to explore" section:

In any case: I'm pretty sure the right thing to do here is to ask Amazon to fix or replace this SVG so that they're not depending on precise placement of SVG tspan elements of an unknown font. If they want to use a custom font with known metrics (e.g. the "AmazonEmber-Regular" font-face that they're asking for), then they need to bundle that as a Web Font, as part of the SVG.

[softvision-oana-arbuzov]

Thanks for the report @dholbert, I was able to reproduce the issue with the provided SVG file link.

Note: The issue does not occur on Windows.

Tested with: Browser / Version: Firefox Nightly 95.0a1 (2021-10-20) Operating System: Ubuntu 20.04.2

Moving to Needsdiagnosis for further investigation.

[dholbert]

Thanks for confirming!

RE Needsdiagnosis, I've already basically diagnosed it -- the issue is they're specifying precise pixel-positions for Choic and e, without actually knowing what font the text is going to be rendered in. So they have zero guarantee about whether their specified positions for those strings will look right. (They do attempt to specify a particular font, via their markup font-family="AmazonEmber-Regular, Amazon Ember", but they don't actually include the font itself as part of this standalone SVG Image. So that font-family styling isn't recognized, and the browser just picks a default font.)

We should ideally do outreach here, to request that the Amazon team address this by either of the following: (1) They could bundle the needed "AmazonEmber" font (e.g. encoded as a data URI) inside of this SVG image, so that their hardcoded pixel positions are more reliable.

Or, probably-better: (2) Stop using this standalone SVG image to draw this "badge" -- they have other techniques for drawing the same badge which work just fine (e.g. at the top of a product page for an Amazon's Choice product, there's what looks like the exact same badge, except that one's not affected by this issue, because Amazon represents it using regular HTML with a background and with <span class="ac-badge-triangle"> for the diagonal flair at the right edge.)

[karlcow]

Ah sorry about that it was on the pile for a long time. Contacted today.