Streaming live at 10am (PST)

Blurry Images in Safari iPad

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


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

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:

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.

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

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