Background Image PIxelation on iOS

Similar to this post, but specific to Sydney theme.


After the recent Sydney update, our site is having issue with iOS. We use a background image on the home page instead of the built-in home page slider. It is very pixelated on iPhones. From an iPhone, go to http://oneequalheart.org/ and you’ll see the issue.

Hello there,

So you didn’t see the pixelated issue before updating? Could you please tell me the changes you made?

Regards,
Kharis

Yes, it wasn’t happening earlier. I believe the only change we made was to install the new Sydney update.
I will double- check with my team. Other info that may help:
Sceenshot: http://oneequalheart.org/wp-content/uploads/2016/11/iOS-error.png
iOS version: 10.0.2
Browsers tried on iPhone: Safari, Chrome

@Kharis, thanks for your interest in our problem.

The changes we made were to upgrade Sydney from version 1.31 to 1.32, and PageBuilder from 2.4.16 to 2.4.17. Note that we are using the Sydney child theme without any custom PHP.

The problem would appear to be specific to iOS. the Android phones we’ve tested, as well as laptop/desktop browsers show the image clearly.

Hello Kharis, I have the exact same problem of SGBIZ and Petejh. I just updated the sydney theme and the page builder to the version other participants told you. Could you please help us? It is very important for our site to be correctly seen on smartphones…Thank u so much, Andrea

Hello there,

Thank you for explaining more details. I am looking into it. I will update you ASAP.

Regards,
Kharis

Hello there,

Could you please try to apply the following CSS code through the Simple Custom CSS plugin or child theme’s style.css?

@media only screen and (max-device-width : 1024px){

  #pg-4778-0 > .panel-row-style{
     background-attachment: scroll !important; 
  }  
  
}

You would clear your web browser’s cache before reloading your site.

Let me know how it resolves the issue.

Regards,
Kharis

The @media query with “background-attachment: scroll” did the trick. FWIW, in case anybody else references this topic later, we used a custom class on the row to select the element, instead of “#pg-4778-0 > .panel-row-style”.

Thanks so much for your help, Kharis!