Cristian Fogel [:cfogel] Reporter
	Description • 6 years ago

[Affected versions]:
- 45.3.0, 32.0a1, 64.0, 65.0a1(2018-12-03)

[Affected platforms]:
- win10x64/32, Ubuntu16.04, macOS 10.14

[Steps to reproduce]:
1. Access https://playtech.ro/stiri/cum-incalzesti-automobilul-masina-ami-repede-sfat-3267
2. Click on the [Mai multe optiuni] button

[Expected result]:
- The slider checkboxes are properly displayed;

[Actual result]:
- Extra symbols inside the checkbox;

[Regression range]:
- not a regression;

[Additional notes]:
- attached screenshot with the issue;
- probably just an issue with the website/font;
- while IE does not display anything, Chrome and Firefox do display the checkbox; Firefox browsers are displaying extra symbols inside;

	Jonathan Kew [:jfkthame]
	Comment 1 • 6 years ago

Not a Firefox bug. The site is inserting Private Use codepoints in there (U+F00C, U+F00D) via CSS rules such as

  #strawberry-cookiebar .slider-checkbox input:checked + .label::before {
    background-color: #1877c1;
    content: "\f00c";
    padding-left: 6px;
  }

As U+F00C is a PUA codepoint, it will only display as intended if the appropriate font is applied. The site has CSS that intends to apply FontAwesome to this:

  #strawberry-cookiebar .slider-checkbox .label::before {
    content: "\f00d";
    color: #fff;
    box-sizing: border-box;
    font-family: 'FontAwesome', sans-serif;
    /* ...etc... */
  }

but AFAICS it fails to provide FontAwesome as a web font anywhere. So it'll only work if the user happens to have FontAwesome installed locally; without this, we display a missing-glyph "hexbox", while Chrome just shows a "tofu" (undefined-glyph) box from whatever the default font happens to be.

So the "fix" is for the site to set up the proper webfont resource if they want to use FontAwesome PUA codepoints. Or, better, remove the (attempted) use of these glyphs altogether; AFAICS they don't seem necessary.

--> Moving to Tech Evangelism.