Background pictures out of shape on my ipad

[TomasJarvling]

Hi. I am working on this site: rosenhanska.se
On my computer and on my phone the site looks good. But when I visit the site on my ipad the parallax background pictures looks blurry and extremely infocused. Why is that?

Tomas

[christopher]

Hi Tomas,

I checked with our development team and this seems to be an old version problem that we have already fixed. But we will check to see if there might be a lingering issue here and there.

Thank you for your report. Please kindly stay tuned for the upcoming release to make sure that we have that problem ironed out.

Thank you.

[christopher]

Hi Tomas,

I have a feedback from our development team. Would you please kindly check the parallax background with other mobile devices too? I want to make sure if this is an isolated issue or not.

I also need your device information:

1. Device model
2. Device OS
3. Device OS Version
4. Browser that you checked with.
5. Browser version.

Thank you for your cooperation.

[TomasJarvling]

The problem is actually only on my ipad. Not on my iPhone (latest os, safari). The pictures are a little bit to large for the iphone but not blurry as they are on the ipad

[rad]

Hi Tomas,

This was fixed last year but I can definitely able to reproduce this on latest iOS on iPad, except on older iOS version. This means something on iOS has changed, in which the builder’s device detection is no longer valid.

Another thing is, this doesn’t happen on the simulator and tools I’m using for troubleshooting, hence, I can’t properly see what’s causing this. But I’m on it

Thanks!

[TomasJarvling]

Hi. Any news on this?

[ruenel]

Hello @TomasJarvling,

Our developers is still looking into this issue.
Please bear with us.

Thanks.

[TomasJarvling]

Hi. Any news on this?

[outpost33]

I posted an answer here that could be of help, you’d need to adapt the code:

Parallax header image with overlaid text

For anyone else with this problem, here is the solution. Place this code in functions.php add_action('wp_footer',function(){ ?> <script> let isIOS = /iPad|iPhone|iPod/.test(navigator.platform) || (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1); if(isIOS){ jQuery('.featured-image.parallax').css('background-attachment','initial'); } </script> <?php });

Hope it helps.

[ruenel]

Hi Michael,

Thanks for chiming in!
We highly appreciate it.

Cheers.

[TomasJarvling]

Hi. I placed the code in the functions.php but I am still having the same problem. Should I change something in the code? Where in functions.php should I place it?

[kory]

Hello, @TomasJarvling!

Placing that code anywhere in your functions.php file in your child theme should have it working. If you are not seeing any effect take place, it could be due to one or multiple forms of caching you may have on your site. Make sure to completely flush your browser cache, any caching plugins you are using on your site, any CDNs you might be using, et cetera.

Cheers!

[TomasJarvling]

Hi. Have tried but it didnt work. I am experiencing the same issue on skagenfiber.no
On skagenfiber.no i can see though that the parallax effect works on the two of the rows. These are ”new” rows that I just added and the rows below, where the parallax effect doesnt work, is older. Could that have something to do with it?

[friech]

Hi Tomas,

I have check your site, and it seems child theme is not active. You need to make the child theme the active theme for the custom functions on it to work.

See Appearance > Themes and make the child theme the active theme.

Thanks,

[outpost33]

As I said in my initial post, I believe you would need to adapt the code I shared to the specific issue that @TomasJarvling is describing.

I would pay particular attention to this line (’.featured-image.parallax’) keeping in mind that this is a specific fix for Ben Ryan’s parallax featured image customisation, which displays the background-attachment issue on iPads running the latest iOS 13.

The issue described in this thread seems related, and I imagine in principle the code should work if one knows how to adapt it, but I’m afraid that’s beyond my ability.

[rad]

Hi Micheal,

Thank you for that reference, but what you have provided is a similar fix that is added before, in which now is failing, which we’re still investigating. It was written in native javascript with the help of Modernzr library, placing that code is easy and should fix it, but it has to conform with the core implementation, especially along with touch detection.

@TomasJarvling, please temporarily implement the provided solution by Michael.

Thanks!