Forums
View unanswered posts | View active topics It is currently Wed Apr 23, 2014 12:51 pm



Reply to topic  [ 7 posts ] 
 Blurry images in PIE - but border width is not greater... 
Author Message

Joined: Tue Jun 26, 2012 6:26 pm
Posts: 6
Post Blurry images in PIE - but border width is not greater...
I'm having an issue where PIE is slightly scaling up images and therefore making them blurry.

I checked the forums, and the only other post mentioned a problem if the border width is greater than the border-radius, but in every case I have a 1px border and a 4px border-radius.

It's happening on every image that pie is working on - and rounded corners are used extensively throughout this site at the client's request - everything from featured post images, custom post type image galleries - even my gravatar images. Everything is scaling up slightly and creating the blur.

The development site is here: clients2.xigko.com

You can look at any of these links and you'll see the problem:
http://clients2.xigko.com/fishing/key-west/
http://clients2.xigko.com/articles/fishing-reports/
http://clients2.xigko.com/florida-keys- ... -calendar/
and anywhere else really

You'll see the page load, and then see the images scale up around maybe 3 to 4 pixels I'm guessing?

I'm pretty frantic on this, as the site is about 10 days from going live. If I have to completely redesign IE, and explain this to the client, I need to do it quickly - but it can't stay the way it is.


Thu Jul 05, 2012 1:19 pm
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1430
Post Re: Blurry images in PIE - but border width is not greater..
Looks like this is a bug having to do with the padding. While your border is less than the radius, your padding is greater, and it triggers the same shape calculating bug.

I can think of a few possible workarounds:
- Increase the border-radius to 5px so it matches the padding width. The difference probably isn't noticeable, but if you want to do it in PIE only you can use -pie-border-radius to override it.
- Alternatively, decrease the padding to 4px.
- Put the border and padding on the surrounding <a> rather than on the <img>
- Switch the padding and border to outset box-shadows instead, as in Method 3 on http://www.impressivewebs.com/multiple-borders-css/


Thu Jul 05, 2012 1:31 pm
Profile

Joined: Tue Jun 26, 2012 6:26 pm
Posts: 6
Post Re: Blurry images in PIE - but border width is not greater..
I think I found the problem, but it's not what I was hoping for.

All the images are set with a 1px solid grey border, and then a padding of 5px. That created the white border, but left the inside image with a slight border.

With Pie, this config makes the images scale up for some reason. I've tried setting the padding and border radius the same value - no change.

I'm going to remove the border-radius from all these images, as it's the only solution to make my deadline, but I'd love to know if there is a way to not have this scale up / blur happen for future sites.


Thu Jul 05, 2012 1:49 pm
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1430
Post Re: Blurry images in PIE - but border width is not greater..
Hmm, perhaps it's the padding *plus* border together that have to be <= the border-radius.
*edit* yeah looks like border-radius:6px sharpens the image back up.

Anyway, did any of my other suggestions help?

For what it's worth this bug should be fixed in the current master branch (2.0 code line), but I'd only recommend trying that if you're adventurous.


Thu Jul 05, 2012 1:55 pm
Profile

Joined: Tue Jun 26, 2012 6:26 pm
Posts: 6
Post Re: Blurry images in PIE - but border width is not greater..
jason wrote:
Hmm, perhaps it's the padding *plus* border together that have to be <= the border-radius.
*edit* yeah looks like border-radius:6px sharpens the image back up.

Anyway, did any of my other suggestions help?

For what it's worth this bug should be fixed in the current master branch (2.0 code line), but I'd only recommend trying that if you're adventurous.


hmm... I tried setting it to 6px and it was still blurry for me.... I'll give that another look, now that I know I can easily turn of the border radius and the client isn't freaking ;-)

I'm not sure I'm adventurous on this deadline, but I'll probably pull the 2.0 code line into my next project. :-)


Thu Jul 05, 2012 1:59 pm
Profile

Joined: Tue Jun 26, 2012 6:26 pm
Posts: 6
Post Re: Blurry images in PIE - but border width is not greater..
Hi Jason,

I'd like to try that 2.0 code line on another test site, but I couldn't seem to find the download for that one. Could you point me to the right place?


Thu Jul 05, 2012 2:08 pm
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1430
Post Re: Blurry images in PIE - but border width is not greater..
No download yet, you'll have to pull from GitHub and build it yourself. You should be able to follow the build steps at http://css3pie.com/documentation/buildi ... om-source/

There is also an extra undocumented step that you'll have to do for the time being -- see my comment at https://github.com/lojjic/PIE/issues/18 ... nt-2797468


Thu Jul 05, 2012 2:53 pm
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 7 posts ] 

Who is online

Users browsing this forum: Baidu [Spider], Bing [Bot], Google [Bot] and 4 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group.
Designed by STSoftware for PTF.