| • jbolorinos-ctr | |
| Apr 7 2020, 8:58 PM |
| F31756703: image.png | |
| Apr 14 2020, 6:54 PM |
| F31747564: image.png | |
| Apr 9 2020, 10:04 PM |
| F31747558: image.png | |
| Apr 9 2020, 10:04 PM |
| F31747072: trilogy.png | |
| Apr 9 2020, 4:14 PM |
| F31747074: current best.png | |
| Apr 9 2020, 4:14 PM |
| F31741196: FireShot Screen Capture #129 - 'Dashboard' - live_browserstack_com_dashboard#os=android&os_version=7_0&device=Samsung+Galaxy+S8&device_browser=chrome&.png | |
| Apr 7 2020, 9:12 PM |
| F31741194: FireShot Screen Capture #130 - 'Dashboard' - live_browserstack_com_dashboard#os=android&os_version=7_0&device=Samsung+Galaxy+S8&device_browser=chrome&.png | |
| Apr 7 2020, 9:12 PM |
| F31741291: image.png | |
| Apr 7 2020, 9:09 PM |
Steps to Reproduce:
Actual Results:
Currently the Amazon Pay button appears stuck to the Paypal button
Expected Results:
The buttons should appear with equal separation in between
@EWilfong_WMF @spatton I created this new task to separate out the other issue mentioned in T249291, since one issue was a misalignment with donation amount buttons, and this task is the misalignment of payment options
Copying over Eric's last comment from there:
@jbolorinos-ctr - Can you provide a screenshot of how this looks on that Swedish URL? Does it not occur on the English version?
I can't recreate the issue on browserstack.com and I don't have a crossbrowsertesting.com account, so I'm a bit at a loss on how to debug this. On browserstack.com, I am seeing the following on a Galaxy S8, Android 7, Chrome Mobile 80:
@EWilfong_WMF to answer your question, the issue listed above does NOT affect the seSE banners since they dont include the Amazon Pay option.
Are you able to recreate this issue using iPhone8? Here's a screenshot from iPhone8-11.0/Safari-11.0 that I got from CBT
**Screenshots previously included by Eric for how he's unable to replicate this bug on browserstack
Just in Chrome devtools I do see a slight difference in button spacing for the banner linked in the description, along with a different sizing of the credit card icons.
This doesn't appear in the current best banner.
There are some substantial differences in the CSS between these banners, so I can't immediately see what change might be causing it.
I do see that difference in button spacing, @Pcoombe. I'll fix that and maybe it will resolve the issue for all web clients.
Alright, I've fixed the button spacing issue that @Pcoombe mentioned. These buttons are adapted from mobile large, so I made sure the styles were in line with that. I also added a new style that allows the PayPal and Amazon SVGs to size down at small widths:
.frb-label > svg {
max-width: 100%;
}
@jbolorinos-ctr - can you run the banner through the screenshots again?
Yup! Just ran it, the results can be viewed here: https://app.crossbrowsertesting.com/public/i15b74a2dc92badb/screenshots/zd6128fbbe96d75cc432
Verified this issue has been fixed on S9/S8/S7/Note3 now:
However I've also noticed the payment options are looking wonky on iPhone, so there still might be some missing styles (see screenshot below)
Can you give it another pass now, @jbolorinos-ctr? I spent more time ensuring the styles match the mobile large payment buttons. It looks good in my local testing.
Screenshot Test Results - Mobile: https://app.crossbrowsertesting.com/public/i15b74a2dc92badb/screenshots/z234e995d23d6b66321c
