Open Bug 1686739 Opened 8 months ago Updated 8 months ago

Several additional non-ascii characters are displayed in preview instead of the Search label on phonak.com

Categories

(Web Compatibility :: Desktop, defect)

defect

Tracking

(firefox84 affected, firefox85 affected, firefox86 affected)

Tracking Status
firefox84 --- affected
firefox85 --- affected
firefox86 --- affected

People

(Reporter: Anca, Unassigned)

References

(Blocks 2 open bugs)

Details

(Keywords: webcompat:site-wait, Whiteboard: [print2021_v86] [old-ui+])

Attachments

(1 file)

Affected versions

  • 85.0b8
  • 86.0a1 (2021-01-13)

Affected platforms

  • Windows 7
  • macOS 10.15

Unaffected platforms

  • Windows 10
  • Ubuntu 20.04

Steps to reproduce

  1. Go to https://www.phonak.com/us/en/hearing-aids/lyric-invisible-hearing-aids/cost-and-subscription.html
  2. Scroll down to the middle of the page and select some content, including the search button
  3. Hit Ctrl + P and observe the print preview

Expected result

  • Search label is displayed, without any additional characters

Actual result

  • Several non-ascii characters are displayed in preview

Regression range

  • Not a regression, reproducible way back to Fx 54.0a1; on even older builds the page is only partially visible

Additional notes

  • Not reproducible on Chrome (see screenshot)
  • Reproducible with the old UI as well
Has STR: --- → yes

This looks like a site error. The "Search" button is not really a <button> element, it's actually <a href="/us/en/find-a-Lyric-hearing-care-specialist.html?lyric" class="button round primary" title="Search">Search</a> which gets styled to look like a button.

The site's CSS then provides a stylesheet (https://www.phonak.com/etc/designs/phonak/clientlibs_base/merged/layout-ltr.w02.4_4_25_2.css.versioned) that includes print-specific rules, including

@media print {
 ...
 a[href]:after {
  content:" (" attr(href) ")"
 }
 ...

i.e. after the link, it inserts the destination path as extra text (for print only).

So far, so good: we'd therefore expect the "Search" button to be followed by text (in the print output) showing the destination of the link.

Unfortunately, they also have

.button.primary:after {
 font-family:icomoon;
 speak:none;
 font-style:normal;
 font-weight:400;
 font-variant:normal;
 text-transform:none;
 line-height:1
}

which also applies here, and therefore the generated text of the link destination is rendered with the Icomoon icon font (except for characters that aren't present in the icon font, for which we get a fallback font -- hence a few legible letters in the path).

FWIW, this does reproduce for me on Ubuntu and Win10 as well as macOS, and also in Chrome (tried on both Win10 and macOS). It's really not a Firefox bug, it's a poorly-written site.

Moving to Webcompat, in case we want to reach out and suggest they fix things; otherwise, I guess this is simply Invalid.

Component: Print Preview → Desktop
Product: Core → Web Compatibility

Headquartered in Zurich, so their WebDev department is probably in my timezone and language scope. ni? myself for outreach.

Flags: needinfo?(dschubert)

Reached out to them via mail. Will update this thread if I hear back.

Flags: needinfo?(dschubert)
You need to log in before you can comment on or make changes to this bug.