Carousel images load zoomed in on iPhone 11

[Fredl]

Hello all, Happy holidays to WYSIWYG developers, mods and users! I'm working on the same site I've been posting questions about lately, www.portagratitude.com. There is a welcome carousel on the home page that loads fine on most devices, but on the business owner's iPhone 11 the carousel doesn't display correctly, the images are zoomed way in to where only a fraction is visible. I have reduced the image sizes to under 1440, which is the width of the 11 display, but that didn't fix the problem. In the "image size" setting of the carousel I have it set to "parallax" because I want the pic fixed and the content to scroll past it, is there another way to ensure that the whole image is visible on iPhone 11 or other high density screens? Thanks for any tips you may provide!

[Pablo]

The reason why it does not work is because the iPad does not support parallax (which is a combination of background fixed and cover).
What you can try is to hide the carousel for smaller breakpoints and use a different method to display the images.

[Fredl]

Thanks Pablo. I don't understand exactly, you suggest to hide the carousel in smaller breakpoint, but the iPhone 11 has a 1440 width resolution, which is the size of my biggest breakpoint, so how would hiding the carousel for a smaller one help?

[Pablo]

In that case, I think the only solution is not to use parallax for the carousel.

[Fredl]

OK, that's too bad, from what I've been reading Apple is the main reason developers should avoid using parallax for mobile devices. That's a shame, as it is a neat, modern effect. Is it possible to make a "mobile only" page in WB17 that would load when an iPhone or iPad load the page??

[Pablo]

Maybe you can use this extension?
https://wysiwygwebbuilder.com/pageredirect.html

[alan_sh]

Thanks Pablo. I don't understand exactly, you suggest to hide the carousel in smaller breakpoint, but the iPhone 11 has a 1440 width resolution, which is the size of my biggest breakpoint, so how would hiding the carousel for a smaller one help?

On an iphone 11, run this https://whatismyviewport.com/ and see what it comes up with. You may be surprised.

Alan

[Fredl]

Thanks Alan, That was interesting and confusing at the same time. It returned 414 x 715 with a screen size of 414 x 896 and a DPR of 2.0 even though the display's resolution is 1792 x 828 (not sure where I got the 1440 number??) Not sure what I can do with this info, but it should help me figure out a way forward.

[alan_sh]

Those answers are what are presented to any browser. So, your images need to be that size.

Alan

[Fredl]

Wow, 414 is a pretty tiny image, odd that a device with such a high res display would only render such small images. I tried scaling one of the images in question and it made a pixelated mess. Since the density is 2.0 I'll try a 828 pixel wide one and see if that is acceptable.

[Fredl]

Maybe you can use this extension?
https://wysiwygwebbuilder.com/pageredirect.html

I'll try it, thanks!

[crispy68]

Is it possible to make a "mobile only" page in WB17 that would load when an iPhone or iPad load the page??

This would be waaaay more work than it's worth.

Why not just turn off the parallax effect for smaller screens? Based on your code, you could add some CSS code like such:

Code: Select all

<style>
@media screen and (max-width: 768px){
#welcome-carousel .frame-1, #welcome-carousel .frame-2, #welcome-carousel .frame-3 {background-attachment: scroll;}
}
</style>

Change the breakpoint to the width you want the parallax effect to stop. This removes the 'fixed' background that safari doesn't like and the slideshow will just scroll with the page using cover.

[Biju]

Hi Ron,
Please check your mail..