Forums
View unanswered posts | View active topics It is currently Tue Sep 02, 2014 10:41 am



Reply to topic  [ 9 posts ] 
 box-shadow and some PIE inaccuracies 
Author Message

Joined: Sat Mar 10, 2012 3:38 am
Posts: 4
Post 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


Last edited by NXHOUND on Sun Jun 10, 2012 5:45 am, edited 1 time in total.



Sat Mar 10, 2012 4:31 am
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1441
Post 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.


Sat Mar 10, 2012 11:26 am
Profile

Joined: Sat Mar 10, 2012 3:38 am
Posts: 4
Post 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!


Sun Mar 11, 2012 12:20 am
Profile

Joined: Thu Apr 07, 2011 3:23 am
Posts: 73
Post 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)


Wed Jun 06, 2012 6:27 am
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1441
Post 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.


Wed Jun 06, 2012 10:51 am
Profile

Joined: Sat Mar 10, 2012 3:38 am
Posts: 4
Post 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 :)


Sun Jun 10, 2012 5:43 am
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1441
Post 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?


Sun Jun 10, 2012 3:43 pm
Profile

Joined: Sat Mar 10, 2012 3:38 am
Posts: 4
Post 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 305 times


Mon Jun 11, 2012 3:48 am
Profile

Joined: Mon Mar 25, 2013 4:17 am
Posts: 1
Post 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.


Mon Mar 25, 2013 4:22 am
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 9 posts ] 

Who is online

Users browsing this forum: No registered users and 3 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.