Comments on: cssSandpaper – a CSS3 JavaScript Library

By: ตำราปราบ IE6 IE7 IE8: เทคนิคสู้รบกับ Internet Explorer 6 7 8 | DesigNIL: Web Design HTML5 CSS3 Tutorial รวมความรู้เว็บดีไซน์ สอนออกแบบเว็บไซ

Sun, 13 Nov 2011 11:32:44 +0000

[...] cssSandPaper เป็นสคริปต์ที่รวมฟังก์ชั่น CSS3 ให้เรนเดอร์ใน IE เวอร์ชั่นเก่าได้เช่นกัน โดยมีข้อดีที่แตกต่างจากอันอื่น คือ มันรองรับ CSS3 Transform ด้วย (เอาไว้หมุน ๆ ครับ) ซึ่งสามารถเอาไปใช้พลิกแพลงได้เยอะมากครับสำหรับฟังก์ชั่นนี้ [...]

By: zoltan

zoltan — Mon, 17 Oct 2011 12:13:47 +0000

@Vincent: Unfortunately, this is a known issue with the current version of cssSandpaper. The happens because the Matrix Visual Filter, which is what cssSandpaper uses in IE to simulate CSS3 transforms, doesn't rotate child containers that are positioned absolutely when the parent isn't. A workaround for this issue is to make some IE specific CSS rules (using, for example, Paul Irish’s Conditional CSS Pattern) to translate the child nodes separately in IE.

By: Vincent

Vincent — Mon, 17 Oct 2011 10:07:08 +0000

Hello,

This is an amazing library.
But unfortunately I have a problem in IE.
When I rotate a div, the child elements (that are positioned absolute) do not rotate with the parent div.

Do you know how I can fix this?

Thanks

By: zoltan

zoltan — Wed, 12 Oct 2011 23:37:58 +0000

@Ian: There is a way of fixing this using the AlphaImageLoader filter. It does get a bit involved though. Do you have an example you can share that I can look at?

By: Sridhar

Sridhar — Sun, 09 Oct 2011 06:22:43 +0000

Hi Zoltan, kudos on the great work. I am pretty new to front-end development. Can you please let me know whether we can develop a cross-browser 3D card flip [http://24ways.org/2010/intro-to-css-3d-transforms] using csssandpaper?

By: Ian

Ian — Wed, 05 Oct 2011 21:14:19 +0000

I’m having success with the script, although some of my other head elements are interfering so I have to figure out what’s going on there.

But more importantly: I’m trying to rotate a 24-bit png in IE and the result pretty ugly. All the transparency is lost and it’s rendered as a black blob.

I thought that your -sand-chroma-override fix might work, but it’s not doing anything. I’m either misinterpreting what it’s supposed to be doing, or not doing it right…

Is there any fix to IE’s poor handling of 8-bit transparency and filters?

By: zoltan

zoltan — Sat, 24 Sep 2011 18:27:51 +0000

@theUtilitariat: Until I implement the transform-origin CSS3 property, you may have to use translations to simulate this.

By: zoltan

zoltan — Sat, 24 Sep 2011 18:24:42 +0000

@harsh: The google font API creates stylesheets that are on Google’s servers, which cssSandpaper will have an issue with. I am working on making cssSandpaper work with third party stylesheets and will publish the results soon.

By: d-ashes

d-ashes — Thu, 22 Sep 2011 18:51:52 +0000

Nevermind, I’d somehow ended up with a download of the v1 beta. All better now!

By: d-ashes

d-ashes — Thu, 22 Sep 2011 18:01:28 +0000

Great idea and I’m hoping it fits our need, but I feel like I’m missing something pretty basic when it comes to DOM manipulation. I’m attempting to apply rotation with ccsSandPaper.setTransform on a mouse click but any call to cssSandpaper.setTransform says that no such function exists in the object. Writing out the object shows it only has the .init() method applied to it, there are no other public methods listed. All of the resource files load correctly and the init function runs. Am I missing something?