Image background behavior on iPad/iPhone

Beaver Builder
1

Hi,

I am using a full width, fixed background image in a row, with “Scale” setting" to “fill”. When viewing it on iPad/iPhone in landscape mode I see a very blurred (zoomed-in?) image. When turning the device in portait mode it looks fine.

You can see it here: http://www.layercake.nl

When setting the image to “Scroll” instead of fixed it does work as expected.

I noticed this behavior does not accure on a (older) Samsung tablet.

Any suggestions?

Thanks in advance!

2

Hello Tibor,

I tried looking at the site but it seems I get the problem on portrait mode, not in landscape mode. Maybe that’s just because of how I looked at the site though(via an online tool and by squeezing my browser to a specific width). You shouldn’t have to set the background attachment to scroll since BB has a media query setting it to scroll when the resolution goes down below 768px. Do you have any screenshots showing the issue? Also, do you mind granting us temporary admin access to the site so we may check further?

Ben

3

[Content Hidden]

4

Hey Tibor,

Sorry to hear about the issues. We were able to recreate the issue using Browserstack, but don’t have an iPad to troubleshoot in the office at the moment. We will on Monday so we’ll take a look as soon as we can and get back to you! If you wouldn’t mind leaving that temp admin access available, that would be great!

Best,
Billy

5

No Problem Billy! It’s not a major problem, although I am totally curious to figure out what’s causing it :slight_smile: It seems that the background size becomes relative to the window rather than its element.

I found this thread, but have not had the time to try things out with the provided solution yet.

I will leave the admin account available!

Have a nice weekend :slight_smile:

6

Hi Tibor,

Yep, I see what you mean on an iPad in landscape mode; it’s as though it is ‘zoomed-in’ to the top of the image.

I tried it on a test site with an image that is 1024 x 426 and it seems to look OK.

However, one other thing I noticed on my actual mobile devices (iPad, iPhone, Galaxy Tab 4- not an online sim) is that the ‘fixed’ effect does not function; the background image ‘scrolls’. Hmm. :slight_smile:

7

Hi Lyle,

I think the plugin sets it to “scroll” on iPad/iPhones anyway. I have try to experiment with different image sizes yet.

I think it’s a CSS/iOS related problem.

8

Hello Tibor,

Our lead dev already did some tests regarding this. He was able to see the issue from his end, tried to recreate the same page on our test site but did have the same problem. Would it be possible for you to send us an export of that page? You can export a single page using this plugin. You can send the export to justin [at] fastlinemedia [dot] com.

Ben

9

Hi Ben,

Sorry for my delayed reply…I spend last week in a place without internet :slight_smile: I have send the export to justin!

Thanks!