Header image showing up blurred on mobile


#1

I had a previous problem but I resolved it myself. But a new problem has appeared for www.mtmaruma.com.

I changed the background-size to cover but now the header image seems to have zoomed into a small part of the header image when viewed on mobile. It just looks like a blurred mess. Both my iPhone 4s and iPad 2 do not show the header image properly although it works fine on my desktop. The image is the recommended size of 1920x1080.

When viewed on quirktools.com/screenfly it shows the image properly but in reality it’s not rendered correctly. I’ve had confirmed by friends in different places on different mobile devices the problem is the same as mine. All say works properly on desktop.

I don’t know what to do now. Please advise.

Thanks in advance
Misha


#2

Hi,
as you mentioned in above that the header image are using “cover” as background-size, its mean:
“Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area” (source)

I dont have iphone device so I Just checking your site using browser simulator and http://quirktools.com/screenfly also and looks like the header image are worked properly


#3

Hi Awan, thanks for taking a look at this.

The browser simulator says it should show fine, but the reality is different. It’s the same problem on a iPad and iPhone. It looks like it’s zoomed in 100x to the blue sky part of the image that you can see properly on the desktop. If you look on an Apple device you might see the problem clearly.

I’ve checked on my friends’ Samsung Galaxy 4s and Sony Xperia and the header image renders as it should. There is no problem on these devices.

How do you suggest I proceed apart from changing theme? There is clearly a problem with the responsive design when it comes to Apple devices.

Is this something you guys can fix? If not I’d have to change theme as the header image doesn’t work for Apple mobile users.

Thanks for any advice you can give.


#4

I am having the exact same problem. https://jacobfarmerflute.com (work in progress)


#5

Is there any follow up to this? I’m still having the problem on Apple mobile devices only.


#6

I just received an email saying this ticket is closed, but I’ve received no reply to my previous question. Is this a problem that anyone is still looking at?

I really like this theme and don’t want to change, but can you please tell me one way or the other if this is a problem that can be fixed.

Looking forward to your reply
Misha


#7

Hi,

I am sorry for the inconvenience.
can you take a screenshot for the header please?


#8

http://www.mtmaruma.com/images/

This screenshot is taken on an iPhone 4s. The image is showing as blurred, but this only occurs on iOS devices.


#9

Okay, thank you and please wait while we are trying to fixing this issue.

All best!


#10

Thanks for the update


#11

Hi,

We had tried to get the solutions to fix the issue, maybe you can try to re-upload different header image with more smaller size?

or you can try to use this css code below:

@media only screen and (max-width: 1024px) {
     #header-banner {
        background-attachment: scroll !important;
   }
}

#12

Hi Awan

Thanks for taking a look at this. I don’t know if you checked but the header image is currently the suggested image size if 1920x1080. Why would you suggest I make this smaller when it’s the size suggested within the theme?

As I said the image shows fine on all mobile devices apart from iOS. I’m confused as to why you’d suggest I reduce the size of the image.

With regards the ccs, I’m not sure what part I should change. Can you advise please?

Thanks
Misha


#13

Hi,

Yes, I am checking your header image also and it has 1920×1080 dimension as suggested. But I am not sure what cause it because all is work well in other devices, and we think that iphone can’t handle the image over a certain size. We also ever got reports that similar with this and the solutions is, re-upload the header image with smaller size or apply the css code in above.

You can put the css code above using simple custom css plugin or just apply it in styles.css within your child theme.

Best regards


#14

It’s not just for iPhone but also iPad. I believe it’s all iOS devices that can’t handle this header image. I tried reducing the size of the image but there was still the same problem when I viewed it on an iOS device.

But I used the custom css you suggested using the Simple Custom CSS plugin and it now works fine.

Thanks so much for your help with this!

All the best
Misha


#15

Happy to hear that its worked :slight_smile:

Thanks for reporting and we will use this to improve our themes in the next update.

Best regards