Page 1 of 3

Problem with Parallax across multiple Breakpoints

Posted: Wed Feb 14, 2018 3:37 pm
by etcbbu
Hi all,

Trying to go live with a site that uses Parallax-Images on all of the pages, on their Default-960 Breakpoint. currently, every page also has a 320-Width Breakpoint, too. Looks great across, essentially all devices. But someone is telling me when they look at it on an iPad, the Parallax-Images are sort of blown-up/zoomed-in/blurry, and not displaying correctly.

But the thing is, I don't have Parallax-Image applied to any of the Layers on the 320-Mobile Breakpoint. On the 320-Mobile Breakpoint, all of the instances of Layer-Objects with Images' being set to Parallax are not set to have Images on the 320-Mobile Breakpoint; those same Layers that are Parallax-Image on the default 960-Desktop Breakpoint I just change to a static, solid *color*, on the 320-Mobile Breakpoint. So I mean, I am not even using Parallax-Images in the 320-Mobile Breakpoint anymore. It is the *same* Layer objects that are set to "Image - Parallax" in the Default-960 Breakpoint, so, yes, it is the same Layer objects that have the Parallax-Images in the Default-960 Breakpoint; but when they are visible in the 320-Mobile Breakpoint, those some Layer objects are just changed to a solid-color background.

How can I fix this...? Do I need to

1) totally hide the Parallax-Image layers in the 320-Breakpoint, completely, and just bring in new Layer objects in the 320-Pixel Width Breakpoint that are just the solid color? (And then hide *those* in the default-960 Breakpoint?)

Or

2) if I just make a third, 768-Breakpoint, and literally just "Make Visible" all of the same objects as the 320-Mobile Breakpoint, and "Make Invisible" all of the same objects from the 960-Default Breakpoint, would that work? Essentially, I'd have a third Breakpoint, but it would, literally, just be a mimic of the 320-Mobile Breakpoint?

The website it http://www.phenixlawfirm.com/test/index.php
I have tried testing it in several online-iPad simulators, both in "Portrait" and "Landscape" mode, but I am not seeing the blown-up, weird-loaded Parallax image like someone is telling me that they are seeing on their real-life iPad.

I really need to know how to approach this, so I know how to build my Parallax-Image websites, now, if this is happening with iPads. Any help would be appreciated.

Re: Problem with Parallax across multiple Breakpoints

Posted: Wed Feb 14, 2018 4:30 pm
by Pablo
The Safari browsers of the iPad is known to have issues with parallax backgrounds.
Although I think the issue in this case is related to the aspect ratio of the image.

Note that you can select a different background mode in breakpoints, but I do not think that the 320 will be useful for the iPad.

Online iPad simulators are fake. They do not really simulate an iPad, they just crop the viewport.

Re: Problem with Parallax across multiple Breakpoints

Posted: Wed Feb 14, 2018 4:37 pm
by etcbbu
When you say,

"I do not think that the 320 will be useful for the iPad."

What does that mean? I am not really sure on what to do, to fix this? My Layers in the 320-Breakpoint are already not set to being Parallax-Images, in my .WBS file, currently, but yet, the Browsers across iPads are seeming to either

1) loading the Parallax-images into the 320-Breakpoint layers

2) loading the Default 960-Breakpoint and then displaying the image in the layer incorrectly (like you said, aspect-ratio is wrong or something)

What can I do to workaround this for the iPad Browsers?

--etcbbu

Re: Problem with Parallax across multiple Breakpoints

Posted: Wed Feb 14, 2018 5:00 pm
by Pablo
The first thing you will need to do if change the aspect ratio of the image.
For example to 1920x800, that works for me most of the time. But you may have to try different size to see what works best, because it also depends on the height of the layers.

In meant that the 320 breakpoint will be ignored by the iPad.

Re: Problem with Parallax across multiple Breakpoints

Posted: Wed Feb 14, 2018 5:18 pm
by etcbbu
Do you mean just changing the height and width of the image, to, say,

Width - 1920 Pixels
Height - 800 Pixels

And loading the image into the Breakpoint that way?

What about the other option I recommended? If I built-out a third, 768-Breakpoint, and literally, just called the exact same objects that I use and are visible in the 320-Width Breakpoint, and just also use them and make them visible in the third, 768-Breakpoint, will the iPad browser (presumably Safari) load this 768-Breakpoint? Or will it still jump up and load the 960-Width Default Breakpoint?

Re: Problem with Parallax across multiple Breakpoints

Posted: Wed Feb 14, 2018 5:20 pm
by etcbbu
Or is changing the "aspect-ratio" something I do within properties or settings of WB, somewhere..?

Re: Problem with Parallax across multiple Breakpoints

Posted: Wed Feb 14, 2018 5:27 pm
by Pablo
Do you mean just changing the height and width of the image, to, say,
Width - 1920 Pixels
Height - 800 Pixels
Yes
And loading the image into the Breakpoint that way?
In the default view.
What about the other option I recommended? If I built-out a third, 768-Breakpoint, and literally, just called the exact same objects that I use and are visible in the 320-Width Breakpoint,
yes, you can try that. Although I am not sure if the iPad will use this.
Or is changing the "aspect-ratio" something I do within properties or settings of WB, somewhere..?
No

Re: Problem with Parallax across multiple Breakpoints

Posted: Wed Feb 14, 2018 5:29 pm
by etcbbu
If I do make the image

Width - 1920 Pixels
Height - 800 Pixels

Is it best that the Layer that will hold this image be sized to

Width - 960 Pixels (of course, to match the Default Breakpoint)
Height - 800 Pixels

?

Re: Problem with Parallax across multiple Breakpoints

Posted: Wed Feb 14, 2018 5:40 pm
by Pablo
You will have to try to see what works best.
I suggest to first change the aspect ratio of the image and no other changes. Do one thing at a time.

The reason why I suggested this is because it works for me:
http://wysiwygwebbuilder.com/support/wb ... tures.html

Re: Problem with Parallax across multiple Breakpoints

Posted: Wed Feb 14, 2018 5:46 pm
by etcbbu
Ok, at this time, I have made all of the Parallax background-images hanged over to just being "Cover" (so, I guess, that is "fixed", correct?)

Can someone, please, who has an iPad, go to these pages:

http://phenixlawfirm.com/test/index.php
http://phenixlawfirm.com/test/aboutus.php
http://phenixlawfirm.com/test/practiceareas.php

And tell me if the images images load ok and look ok? Or do they look zoomed-into and messed up? They are not Parallax anymore, but just fixed/set to "cover".

Re: Problem with Parallax across multiple Breakpoints

Posted: Wed Feb 14, 2018 5:51 pm
by Pablo
'cover' is the same as 'parallax' . There is no difference in the way the browser will displays the image.
The only difference is the background position.

So, changing this will not fix the issue.

Re: Problem with Parallax across multiple Breakpoints

Posted: Wed Feb 14, 2018 6:26 pm
by etcbbu
Ok, so for two images, at this time, I have changed the Image-dimensions on the two raw images to be

Width - 1920 Pixels
Height - 400 Pixels

And then on the two Layers on the page, I have set the Layer-size to be

Width - 970 Pixels
Height - 400 Pixels

Can someone, please, who has an iPad, go to this one page:

http://phenixlawfirm.com/test/index.php

And tell me if the images images load ok and look ok? Or do they look zoomed-into and messed up?

Re: Problem with Parallax across multiple Breakpoints

Posted: Wed Feb 14, 2018 7:03 pm
by Pablo
It still doesn't good for me.

But note that the filename is also invalid:
https://www.wysiwygwebbuilder.com/forum ... f=10&t=131

Re: Problem with Parallax across multiple Breakpoints

Posted: Wed Feb 14, 2018 7:29 pm
by etcbbu
Ok, I am sorry, can you please go here and try these two pages again:

http://phenixlawfirm.com/test/index.php
http://phenixlawfirm.com/test/aboutus.php

? I removed out all of the images on my web-root "images" folder, and deleted out all of the old .php/.css and all other files, and republished the entire site.

I removed all of those hyphens from the various Layers' image files, and got rid of the numbers at the beginning of the filename. The filenames now only have letters and numbers, like, for example,

testingnewbreakpointindex13.JPG and testingnewbreakpointaboutus2.JPG

Can someone, please, who has an iPad and check this on an iPad tell me if the images images load ok and look ok? Or do they look zoomed-into and messed up?

Re: Problem with Parallax across multiple Breakpoints

Posted: Wed Feb 14, 2018 8:04 pm
by etcbbu
All right, I have just now cleared out all old images in "images" folder on my web-space, and also cleared out all the .php/css/javascript, all pages. I obliterated it all, and re-published everything just now.

Could someone with an iPad, please visit on an iPad:

http://phenixlawfirm.com/test/index.php
http://phenixlawfirm.com/test/aboutus.php

Tell me if the "index.php" page Parallax layers are loading and look ok? Or do they look zoomed-into and messed up?

Tell me if the "aboutus.php" page is displaying the third 768-Breakpoint, and if it all looks ok?

--etcbbu