webcompat / web-bugs

A place to report bugs on websites.
https://webcompat.com
Mozilla Public License 2.0
742 stars 66 forks source link

amazon.com - SVG logo is broken #90050

Open dholbert opened 3 years ago

dholbert commented 3 years ago

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 Screenshot
Browser Configuration
  • None

From webcompat.com with ❤️

dholbert commented 3 years ago

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

chrome-screenshot

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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: image

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 commented 3 years ago

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

Note: The issue does not occur on Windows. image

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

Moving to Needsdiagnosis for further investigation.

dholbert commented 3 years ago

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 commented 2 years ago

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