CSS3 PIE Forums
http://css3pie.com/forum/

box-shadow and some PIE inaccuracies
http://css3pie.com/forum/viewtopic.php?f=4&t=1582
Page 1 of 1

Author:  NXHOUND [ Sat Mar 10, 2012 4:31 am ]
Post subject:  box-shadow and some PIE inaccuracies

Hi everyone!

Sorry, I badly know English and I use a translator.

I use PIE to develop some web projects. In my opinion, PIE - the best solution to provide support for some CSS3 features in IE. Probably should not have to create a new topic, but I noticed some inaccuracies (screenshot attached).

Attachment:
pie_ff.png [16 KiB]
Not downloaded yet


I am interested in the development of CSS3 features for IE. I created a small script to emulate the 'box-shadow' property (project moved on GitHub). The script is partially supported 'inset' option, and I plan to make full support for this property (if there is enough free time and knowledge).

Attachment:
iebs.png [11.34 KiB]
Not downloaded yet

Author:  jason [ Sat Mar 10, 2012 11:26 am ]
Post subject:  Re: box-shadow and some PIE inaccuracies

The inaccuracies you describe are known issues. The bumps on the border corners is https://github.com/lojjic/PIE/issues/11 and is fixed in latest master. The sharp shadow with negative spread is https://github.com/lojjic/PIE/issues/183.

Thanks for linking to your project. It's clear you've borrowed implementation ideas from PIE's source code (perhaps even copy-pasted some of it? similar variable names and such) which I'm fine with but please consider adding some attribution.

Your implementation of inset box-shadow is pretty much what I did in PIE's original implementation and threw it away due to its limitations. I think you'll find that your approach breaks down as soon as border-radius is involved. Also be careful with clip:rect() in IE8 - it does strange things sometimes with sub-pixel rendering where it sticks out of the clipping rect slightly.

Would you consider doing this work within PIE itself rather than as a new standalone project? I think we could both benefit. I'm happy to assist.

Author:  NXHOUND [ Sun Mar 11, 2012 12:20 am ]
Post subject:  Re: box-shadow and some PIE inaccuracies

Thanks jason for your answer!

I assumed that these inaccuracies are known (sorry for the extra report).

Quote:
Thanks for linking to your project. It's clear you've borrowed implementation ideas from PIE's source code (perhaps even copy-pasted some of it? similar variable names and such) which I'm fine with but please consider adding some attribution.


Sorry, corrected (added link and description to the source code).

Quote:
Your implementation of inset box-shadow is pretty much what I did in PIE's original implementation and threw it away due to its limitations. I think you'll find that your approach breaks down as soon as border-radius is involved. Also be careful with clip:rect() in IE8 - it does strange things sometimes with sub-pixel rendering where it sticks out of the clipping rect slightly.


Yes, I know about these limitations. There are some ideas of how to get around some of them (if they are effective, I will certainly tell about it). Also, the shadow without border-radius is often quite used.

Quote:
Would you consider doing this work within PIE itself rather than as a new standalone project? I think we could both benefit. I'm happy to assist.


My script - just a experimental project. It is unlikely that it will be a real project.

I wish the success of your project. Thank you!

Author:  xem [ Wed Jun 06, 2012 6:27 am ]
Post subject:  Re: box-shadow and some PIE inaccuracies

Hi!

Glad to see that inset box shadows are partially possible. It would be nice to enable this feature in PIE on elements which don't use border-radius. (unless you find a way to make both of them work together, of course... but I guess that's not easy at all... or impossible)

Author:  jason [ Wed Jun 06, 2012 10:51 am ]
Post subject:  Re: box-shadow and some PIE inaccuracies

Yeah I plan to try doing that soon. The architecture changes in the master branch (2.0) should actually allow for use along with border-radius, as long as the inset shadow is not offset at all.

Author:  NXHOUND [ Sun Jun 10, 2012 5:43 am ]
Post subject:  Re: box-shadow and some PIE inaccuracies

Some problems with positioning (screenshot from IE7). Also, quickly checked in IE6 and IE8.

Attachment:
pie_pos.png [42.21 KiB]
Not downloaded yet


Quick fix:

1) For fixed elements:

Code:
docEl = doc.documentElement;
            
// The HTML element has a default border (IE7)
            
x = ( elBounds.x - docEl.clientLeft ) * logicalZoomRatio;
y = ( elBounds.y - docEl.clientTop ) * logicalZoomRatio;


2) For elements with a width not specified in pixels and for a parent with a scroll bar:

Code:
// If the width is not specified in pixels (for example, 2em or medium)
               
bLeft = PIE.getLength( cs.borderLeftWidth );
bLeft = bLeft.pixels( par ) || par.clientLeft;
               
bTop = PIE.getLength( cs.borderTopWidth );
bTop = bTop.pixels( par ) || par.clientLeft;
               
// If a parent has a scroll bar
               
x = ( elBounds.x - parRect.left + par.scrollLeft ) * logicalZoomRatio - bLeft;
y = ( elBounds.y - parRect.top + par.scrollTop ) * logicalZoomRatio - bTop;


P.S.: glad to hear about the imminent appearance of support for the inset shadows!
P.P.S.: my experimental project has moved on GitHub :)

Author:  jason [ Sun Jun 10, 2012 3:43 pm ]
Post subject:  Re: box-shadow and some PIE inaccuracies

@NXHOUND: Thanks, would you mind please submitting these fixes as pull requests in GitHub, and include your testcase document in the 'tests' directory for future testing?

Author:  NXHOUND [ Mon Jun 11, 2012 3:48 am ]
Post subject:  Re: box-shadow and some PIE inaccuracies

@jason: Unfortunately, I've recently been working with a distributed version control system and don't really understand all the intricacies. The testcase document will be attached to the message.

Attachment:
position.zip [716 Bytes]
Downloaded 879 times

Author:  athanph [ Mon Mar 25, 2013 4:22 am ]
Post subject:  Re: box-shadow and some PIE inaccuracies

Hi. I'm experiencing the exact "positioning" problem NXHOUND posted above when an element is being applied with box-shadow or border-radius. Tried both Pie versions but to no avail. Help please?

Thanks.

Page 1 of 1 All times are UTC - 7 hours [ DST ]
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
http://www.phpbb.com/