Unexpected padding, gradient and other bugs with external integrations — iOS

Hi Webflowers!

I’ve been developing a website for my client — so far so good (not everything went smoothly but most of the stuff works well, so that’s important). However, I’ve asked a member of my client’s team to check out the responsiveness on his smartphone.

So we found out a few bugs on some iOS devices:

1. Unexpected padding in the “Solutions” section
There is an infinite carousel and I made it to have max-width 1920px — however, for some reason, there is a 10px padding. Overall, the website has 10px padding on mobile but not for the carousel part. The section looks fine on my OnePlus 5T.

2. Gradient bug in the “Solutions” section
The same story here: there should be a smooth fading effect but it’s glitched (I guess?) on iOS devices. Looks great on my smartphone.

3. Owl Carousel plugin doesn’t work properly on mobile — “Solutions” section
This is an issue for both Android and iOS. There should be only one card on mobile however there are three cards. I suppose it’s intended because I made it to show two cards on the sides for all breakpoints, however, only mobile looks bad — mobile landscape looks as intended. I know that the plugin isn’t supported anymore but I don’t want to rebuild it again and integrating another slider plugin. I hope my issue can be solved by other means.

4. F’insweet’s “load more” feature doesn’t work at all
Sadly the load more doesn’t work on the website at all. I just wanted to mention it because it’s a huge problem. That being said, I’m gonna make another post later on — I’ve asked for help in the SweetJS community already.

Thank you guys for your replies in advance!

P.S: I don’t have iPhone or iPad so I’m unable to test and find out the solution myself :pensive:

Read-only link: Webflow - EMD-Labs
Live site: https://emd-labs.webflow.io


Hope to find some help here :pensive: