www.wattpad.com - The "Sign up with Facebook" button is broken

[cipriansv]

URL: https://www.wattpad.com/

Browser / Version: Firefox Preview Nightly 200601 (🦎 78.0a1-20200529095426)
Operating System: OnePlus6 (Android 10) 1080 x 2280 pixels (~402 ppi pixel density)
Tested Another Browser: Yes Chrome

Problem type: Something else
Description: The "Sign up with Facebook" button is broken
Steps to Reproduce:

1. Access https://www.wattpad.com/
2. Observe the "Sign up with Facebook" button.

Expected Behavior:
The button's label must be correctly displayed and the button is functional.

Actual Behavior:
There are additional letters and symbols next to the button's label and the button is not functional. An error message is displayed upon tapping the button.

Notes:

1. The issue is not reproducible on Chrome Mobile 83.0.4103.83
2. Screenshots attached.

Watchers:
@softvision-oana-arbuzov

This is how the page looks on Firefox Preview Nightly:

And this is the page on Chrome:

Browser Configuration

• None

From webcompat.com with ❤️

[karlcow]

This is quite broken indeed.

The markup received by Firefox.

<button class="btn btn-facebook btn-block ">
	<img class="fa fa-facebook-official fallback " style="height: 24px; width: auto;" src="/img/icons/wp-neutral-5/facebook-official.png" alt="icon facebook-official">
	<span>
		<span class="auth-btn">Sign up with Facebook</span>
	</span>
</button>

ok understood. This is the markup received by Chrome

<button class="btn btn-facebook btn-block ">
  <span class="fa fa-facebook-official fa-wp-neutral-5 " aria-hidden="true" style="font-size: 24px;"></span>
  <span>
     <span class="auth-btn">Sign up with Facebook</span>
   </span>
</button>

Firefox is having a call to an image… which is not accessible.

HTTP/2 403 Forbidden
date: Tue, 02 Jun 2020 23:49:57 GMT
content-type: text/html; charset=utf-8
access-control-allow-origin: *
x-amz-id-2: K5i8cuIrH4QZvc7Tp5kYCQiDO9ffgiFCEX5F9MwAC5w96mGsWULPnSnl2TL+7HBmS8LQCqIk2Ng=
x-amz-request-id: 1F63419FFD54F7DD
x-powered-by: wp
cf-cache-status: DYNAMIC
cf-request-id: 03190a251d00000ab81c047200000001
expect-ct: max-age=604800, report-uri="https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct"
server: cloudflare
cf-ray: 59d512e82b270ab8-NRT
content-encoding: gzip
X-Firefox-Spdy: h2

Chrome is calling the font icon.

If I change the markup to be the one of chrome, everything is working fine.
If I fake the UA to be chrome everything is fine.

Wattpad needs to fix it.
Moving to needscontact.

[karlcow]

I wonder if @osama can help us find the right person at @Wattpad in charge of the sign-in modal so they can fix the rendering issue.

[osama]

Thanks for the tag, I've passed this onto the internal teams responsible for this flow.