Hi Friends,

www.quercusmoleculardesign.com/working

I have a banner module with parallax background photo, which works well on full screen, phone (portrait + landscape), ipad (portrait), but not in ipad (landscape). It only loads the lower quarter of the module.

Any thoughts? Attaching screen shot of template settings for that grid as well as screen shot of what happens on ipad screen in landscape

hmm the table is causing problems on my desktop view

If you remove the table content - does that work better?

Cheers
Paul

Got rid of the table, but still having the problem only on the ipad in landscape

Hi again

Yes I can see you have added p tags and h4 tags but it really needs to be css as I have a white band above the image on a desktop.

Can you test with the empty tags removed

I think I will need to double check in the morning as ios does do funny things with this affect

I need to check on my ipad in the morning

Band that I see



As a test I'd also suggest changing the size of the image to see if that helps

I removed all formatting, just put it all in paragraph. The image size is 328kb, which shouldn't be a problem size wise. It all loads fine in everything except the ipad, now that banner module doesn't load at all in Safari on ipad, and still has problems in Chrome on ipad landscape (looks fine in portrait)

Should I be trying a different module position? I'm out of ideas here.

Thanks.

Hi

I'll double check with the team on this tomorrow when I have access to my ipad

Any progress on this?

Any ideas on this? Still having the issue, that parallax banner module loads with a big blank white swath, without a third of the module. I need that copy that's not visible.

It only happens when I hold the iPad in landscape mode, the module loads as needed on the phone and in iPad portrait.

When I reduce the screen width on a computer screen, the module acts fine.

It happens only in iPhone landscape, but in both Safari and Chrome, so not a browser issue.

Appreciate any suggestions.

Hi,

This seems to be ipad specific as it works fine for me on android.

Which version of the operating system and browser are you using?

I suspect it's due to safari's issues with fixed background positioning.

Regards,

Rob

I am running IOS 10.3.1 on the ipad, and the problem is the exact same with Safari, Chrome and Firefox.

Researching the issue, it seems I'm not the only one with problems - and the solutions point in the coding,

When I test screen width on desktop, it reacts well, all displays as it should. iPhone fine as well.

So there must be something in the code instructing ipad landscape. Something about overflow:hidden bug?

I'd really hate to give up on this, since that module is important to the site. I want that parallax module, and I need the text in it...

Really hoping we can find a solution - figure out some code/query modification?

Hi,

So you see no issues on an iphone, only on an ipad?

I will need Paul to check as I don't have access to an ipad.

As I mentioned, safari has some issues with fixed image backgrounds, but I'm not totally sure that is the issue here.

When you say you are not the only one with the problem; can you point us to the other issues that you found so I can check if there were any solutions given in tickets?

Regards,

Rob

Hi

Can you attach a screenshot of the settings for this image e.g. the setting for this row

With spacing you can add this class bottom100 to add padding rather than add extra paragraphes

I made the class adjustment as suggested, thanks

stackoverflow.com/questions/8004707/responsive-website-on-iphone-unwanted-white-space-on-rotate-from-landscape-to

This one is for Wordpress:
en.forums.wordpress.com/topic/ipad-display-issues-in-landscape-mode

This might be useful
stackoverflow.com/questions/41086610/media-queries-orientation-landscape-not-working

ah right Rob was referring to forum threads on Joomla Bamboo or tickets but I will let him know

Can you attach a screenshot of the settings for your image so I can try it on a live demo site

Thanks
Paul

How big in dimensions is the image?

1500 x 846 px