Paypal-checkout-components: FireFox 55 - Drop-In UI - PayPal Checkout.js - icon load issues

[RyanJRegan]

Description

When you include a PayPal payment option in the Drop-In UI (Tested on versions 1.4.0 and 1.7.0) the icon doesn't fully render with the "PayPal Checkout, The safer, easier way to pay" words in a way that's visible to customers. I should note that using the PayPal Checkout.js to create a standalone PayPal button does not have this issue (though it does take a second or two to render which is odd).

• [ ] Screenshots or videos that show the issue
  Here's a video of this happening in the Drop-In UI and a video of this not happening with the PayPal Checkout Button using the Checkout.js library
  videos.zip

PayPal script is just:
<script src="https://www.paypalobjects.com/api/checkout.js" data-version-4 log-level="warn">`
in the PayPal code. Dropin version is 1.7.0.

Here's the two test pages I made for this:
Drop-In UI v3
PayPal Checkout.js

Steps to reproduce

Use Firefox v 55 on Mac OSX
Click "PayPal" as your payment type for a v3 Drop-In UI

• Should render a yellow background icon only. The text is hidden.

Affected browsers

• [x] Firefox 55, Mac OSX

[crookedneighbor]

I think the problem has something to do with window.getComputedStyle when the div where the button is being rendered is not visible. Here's a codepen that illustrates the problem by not displaying the button until after the render promise resolves. (does not use Braintree):

https://codepen.io/braintree/pen/3e13a23717ed8f8a3795d615860f9f04

Since it's a codepen, you can't actually run the auth, since the checkout.js script is not on the parent page, but it does illustrate the yellow button issue independent of Braintree.

[bluepnume]

Thanks for the report and the great examples. I'll take a look into this today.

[bluepnume]

Yeah you're totally right @crookedneighbor -- it's because of this: https://bugzilla.mozilla.org/show_bug.cgi?id=548397

The issue should be temporarily resolved, for the time being, since Hermes rolled back and the old code isn't using getComputedStyle. Before it rolls forward again I'll get a fix into checkout.js.

[bluepnume]

I should note that using the PayPal Checkout.js to create a standalone PayPal button does not have this issue (though it does take a second or two to render which is odd).

Looks like this is lag caused by the same issue. An implementation detail of the button is that it actually does a double render -- in this case the getComputedStyle issue is only affecting the first render, hence the missing text/logo.

Probably high time to start running tests in saucelabs so we can catch this kind of problem earlier.

[bluepnume]

OK, fix pushed for checkout.js. Next release of drop-in should also pick up the fix.

[geetfun]

Thanks to Braintree support for pointing me to this thread. Any ideas when this will be fixed?

[bluepnume]

I believe @crookedneighbor mentioned the next release of Braintree drop-in was likely to be this week. Not sure of the exact timeline.

[crookedneighbor]

In my testing, on Firefox 55.0.3, it is now fixed. No release required.

[bluepnume]

Yep, getComputedStyle is now null-checked by default in the button. Closing this out.

Thanks all!

[github-actions[bot]]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.