8

Our website appears fine on a Mac. However, on an iPad, the home page slider images appear very very pixelated.

I've had a look at [this article][2] and changed the JPGs to progressive, and cleared the server cache, and the iPad Safari cache, yet the issue remains.

Help appreciated.

Insight
  • 202
  • 3
  • 28
  • Does this occur on one iPad or all iPads? If all, then it is a problem with the code itself. I would suggest moving this to SO. – JBis Sep 26 '18 at 02:02
  • We only have 1 iPad to test on @JBis. – Insight Sep 26 '18 at 02:30
  • Firstly, welcome to Ask Different! :) Unfortunately I've had to close this question as your problem doesn't seem to be about a specific iPad, but rather with a website instead. You may want to take a look at [What topics can I ask about here?](https://apple.stackexchange.com/help/on-topic) for more info. Stack Overflow or one of the [other Stack Exchange sites](https://stackexchange.com/sites) may be a better option for you. – Monomeeth Sep 26 '18 at 03:33
  • Can you migrate this to stackoverflow please @Monomeeth ? – Insight Sep 26 '18 at 05:30

2 Answers2

5

From this answer, using background-attachment: fixed with background-size: cover causes issues on most mobile browsers. You can try using background-attachment: scroll. This won't give your desired effect, but you'll see the images at least. You could use a media-query or two to limit it to devices that are tablets or phones by using @media screen and (max-device-width: 1024px){}

OR

You can use background-position: scroll and include some javascript that will keep the image at the scrolled position (keeping it at the top of the window): DEMO

Insight
  • 202
  • 3
  • 28
0

Maybe try to convert the image to a PNG or SVG and see if this helps. If you have a graphic designer have him do this or use one of the image converters on the web. JPEGs are compressed each time they're saved and this is a lossy compression so the image will artifact giving the pixelated look you're describing. If this solves the problem then you know it was a problem with the image itself. If it still appears pixelated then this may be a problem with the Ipad instead. I would then see if you can get a developer to set up an emulator for a different Ipad device, with Genymotion or with the built in emulator that comes with Android Studio, and visit your site on the emulator and see if the problem still persists. Hopefully this helps!

Nathan
  • 7,853
  • 4
  • 27
  • 50
  • If I view the website in a Mac desktop browser with the same viewport dimensions as an iPad, the JPGs appear fine, so it is not the JPGs which are the problem. – Insight Oct 01 '18 at 04:45