Parallax breaking ios devices

[lpug]

Ive been stuffing around with different combinations to see if I could find a solution nothing seems to have worked.
Ive created a basic page with one background image in a layout grid and selected parallax with another grid below with a H1 header and some text using a google font.

Problem- looks good on desktops and android devices, i.e. the background image is displayed relatively symetrical.
On ios devices the background image is massively enlarged, i found an advanced page option to fix background on safari (made no difference)

Next step same page but selected universal-parallax, displays perfect on all devices including ios devices but after refreshing the page the background does not appear. ( I checked soem of the advice on this forum with people having same issues but made no difference for me)

Third option - same page with no text layout grid and this time it displays good on all devices with parallax, not sure what text s got to do with it.

To test the ios problem you must be checking on a actual device and not use a web base simulator.

My project i have attached has 3 pages named:

parallax
universal
no-text

here is link to my project https://www.dropbox.com/s/ktzoaxck7zqyrcc/test.zip?dl=0

I have created breakpoints however the default 1920 seems to work across devices.

Thanks in advance

[Pablo]

Note that I have no control how parallax works. This is not WWB specific functionality.
But you can download a working demo for universal parallax here:
https://www.wysiwygwebbuilder.com/templ ... rallax.zip

Demo:
https://www.wysiwygwebbuilder.com/suppo ... allax.html

[lpug]

Thank you

[lpug]

One more question before I stop persisting with parallax, its just so unreliable its probably best I drop it.

For testing purposes I have created one break point that matches my device that Im testing it on, in the past I have finished my projects only to discover stuff doesnt always work as it displays in preview mode.

Anyway could someone clarify....I have one layout grid, set as a flex box all other settings left as default.
I have inserted a background image and selected cover as my size.
Adjusted the grid top and botton padding so the image is to my liking.
Viewed on device and all seems to look as it should.
If I then leave all settings as they are ond change cover to parallex, the image on my device after publishing is massively over enlarged and nothing i do to the padding will fix it.

Am I doing something wrong before I kill it? Pablo you said this is a third part function and not part of WWB?

BTW is there any rule of thumb when it comes to background images set for cover in relation to padding for top and bottoms.....I find this to be a bit of hit and miss.

I've googled and it appears parallax doesn't work on ios devices?

Thanks in advance.

[crispy68]

Setting the background image as cover versus parallax is not handled quite the same.

When you set it to cover, the image is going to be stretched(scaled) to fit horizontally or vertically depending on whichever is longer to always fill the background. However, when it is set to parallax, it also has to 'cover' the background but also has to be stretched a bit more vertically so that the image will move (aka parallax) when you scroll the page without leaving gaps since the image is moving at a different speed than you scrolling the page.

BTW is there any rule of thumb when it comes to background images set for cover in relation to padding for top and bottoms.....I find this to be a bit of hit and miss.

You don't set padding for the background image. You can adjust what part of the image you will see by adjusting the horizontal and vertical settings. For example, setting them both to center will make sure the center of your image is always centered in the background.

If you are referring to adding padding to the grid itself, this only affects how high the grid will be. Again, the image in the background will always be determined by the overall width and height of the grid and of course this changes depending on the screen size. Setting it to cover will scale the image horizontally and vertically to fill the space.

My rule of thumb is always to make the background image as wide and tall as the space you are putting it in. For example, if your grid is going to be 500px tall and full width of the screen, then I would make my background image 1920 x 500 pixels. Keeping the aspect ratio from breakpoint to breakpoint will also help keep the image looking the same. So if my default is 1920 x 500, then in a 1366 breakpoint, it would be 1366 x 356, in a 768 breakpoint it would be 768 x 200, and so on. Of course this is assuming you don't have any content in the grid. Any content inside will always contribute to the height as well.

[lpug]

Thanks crispy for your detailed response, it makes sense....you mentioned you dont need padding, however if you leave the grid top and bottom padding to zero then you see no background image.

[crispy68]

if you leave the grid top and bottom padding to zero then you see no background image.

This is true. If you are not going to place any content/objects inside then you'd be better off using a full width floating layer versus a grid. Less overall code and no need for padding.

[lpug]

I actually will have overlayed text,(so layout grid it is) i thought layers are not responsive....i.e. you need to set a lot more breakpoints?

[crispy68]

It always depends on what you are trying to do and your layout. Since I'm not sure what the end result is that you are after, it's hard for me to say what's the best way to do it.

[lpug]

Your right, just circling back to the aspect ratio and breakpoints.... my default page is 1920, and I have a background image of 1920X800, I set the size to cover. My layout grid top & bottom padding is 400 (total 800 to fit my image height) however if I keep the same aspect ratio for each break point as an example breakpoint 380 my image becomes 380X158, in this case i find the height to be too narrow. Is it ok to increase the height so it takes up more realestate on this size of device? or is there a better way to do this.

[crispy68]

Yes, you can increase the height to whatever you like as long as the image is to your liking in the background. That's why I typically keep me images centered as usually that's what you'll want to always see.