▼
Streaming live at 10am (PST)

Blurry Images in Safari iPad

#1

Large transparent images are rendering blurry in iOS 8.4. Trying to ensure the site will look right on older devices is giving me a real headache! Please compare the first section which has an image placed inside (blurry), to the second section which has an image set as a background fill (not blurry). Both use the same PNG image which has been exported in a high enough resolution (2000px) for the iPad retina display.

It would be great if anyone could tell me if this is a rendering issue, or if this has been fixed in later releases, iOS 9, 10, 11?

Here are the links!
http://whyblurry.webflow.io
https://preview.webflow.com/preview/whyblurry?preview=0d41f3e9aee450d87442f93ac4936f12

#2


http://www.idownloadblog.com/2013/10/26/how-to-get-rid-of-the-blur-effects-in-ios-7/

#3

Hey @garymichael1313 thanks for taking a look, I’m a bit confused by your response though. The problem is how the website is rendering in Safari on iPad as shown in image attached:

ipad-safari
ipad-safari.jpg1190x1440 45.7 KB

#4

I was sharing some commonalities of IOS renderings. Check those settings as well. I currently don’t have an Apple device. I’m sure others in the community can share what they see on their IOS device. They’ll want to know these specs:

  1. Are the images PNG or SVG?
  2. What app were they created in?
  3. What is the vector resolution?

Hey everyone - Can you guys take a look at @WebDesign graphics on an IOS.

#5

Hi @garymichael1313 and anyone else @webflow with an iOS device. The images I have a problem with at the moment are transparent PNG files, 1500px or larger, exported from Affinity Designer. I see no blur on PNG files with a smaller dimension. Please take a look at http://whyblurry.webflow.io

closed #6

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.