Greetings,

I have a problem with making PIE work on a page having jQuery mobile setup.

When I remove jQ mobile script include tag, PIE works fine, but when jQ mobile is included, PIE not only doesn't apply CSS3 attributes but also some common attributes like background colour. As if it completely ignores (or fails to apply) the whole CSS rule.

This must be happening because of the complex manipulations jQ mobile does to the DOM, but I just inquire if the PIE development team has any idea about the cause of this problem.

I know that it's strange to run a jQ mobile page on old IE, but my page is mainly designed for mobile devices, and the client wants it to run and have a descent look on all desktop browsers, including IE 8.

Regards,

I'm using PIE version 1.0beta5 on IE 8 on WinXP

I haven't heard of this issue from anyone else... probably because of the scenario which you admitted is a bit strange.

I'm happy to take a look if you have a URL that demonstrates the issue.

Thanks for your reply.

Yes, I think that you won't find anyone who have tried this scenario before.

I attach the page to this post. I made a dummy div with id "gogo" styled with the CSS rule #gogo which has the PIE behaviour.

gogo should have rounded corners. If you remove jQ mobile script include it will work, but with jQ mobile included it won't.

Thanks for the zip. At its most basic you're just running into the common z-index issue -- see http://css3pie.com/documentation/known-issues/#z-index -- PIE's rendering element is just slipping behind the container's background-color that is added by jQM. Adding position:relative fixes that, but it seems there's another bug where it's not painting until you mouse over the div. I'll try to look into that more deeply when I have time.

Greetings,

Thanks for your reply.

When position:relative and the PIE behaviour are placed in one CSS rule with the other attributes (background, border, ...) everything works fine. But when I place the position and behaviour in a separate rule (to enable applying PIE conditionally for IE only), the problem you mentioned occurs: the background doesn't appear until the mouse hovers over the div, and the border doesn't appear at all.

I may write the position and behaviour inside all the CSS rules. Behaviour is ignored by all browsers other than IE, but I fear that position:relative cause unexpected results specially that this page is intended to work on a variety of devices.