Forums
View unanswered posts | View active topics It is currently Thu Jul 24, 2014 6:22 pm



Reply to topic  [ 8 posts ] 
 [solved] rounded corners on elements with borders 
Author Message

Joined: Mon Sep 20, 2010 4:04 am
Posts: 3
Post [solved] rounded corners on elements with borders
Hi there,

I'm having some problems getting PIE to work properly on elements with rounded corners and borders in IE6.

This is the problem I am having:

Image

As you can see, PIE is almost working but for some reason it sticks a black border around the whole element.

The box is a simple div with the following css:

Code:
.details-right {
float: right;
width: 330px;
}

.details-info {
position: relative;
width: 330px;
border-radius: 7px 0 0 7px;
-moz-border-radius: 7px 0 0 7px;
-webkit-border-radius: 7px 0 0 7px;
background: #fff;
border: 1px solid #e5e5e5;
border-right: none;
padding: 15px 15px 5px;
}


The html for this box is also simple:

Code:
<div class="details-right">
   <div class="details-info">
      <h3>Additional Info</h3>
      <dl>
         <dt><label for="media-names">Media Names</label></dt>
         <dd><input name="media-names" type="text" class="text" /></dd>
      </dl>
   </div>
</div>


This is all part of a very large application that is in development so posting an actual html link isn't really possible.

Does anyone have any ideas as to why this might be happening?

Thanks in advance!


Last edited by boz on Tue Sep 21, 2010 2:31 am, edited 1 time in total.



Mon Sep 20, 2010 4:30 am
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1441
Post Re: rounded corners on elements with borders
IE6 doesn't support border-color:transparent, so to hide the element's border PIE has to resort to some ugly hackery. It looks like for some reason that IE6-specific logic either isn't getting executed, or is failing in some other way.

Do you get any JS errors thrown while the page is loading?

There have been some tweaks to how the IE6 stuff works since beta2, you might try building from the current source code and see if it fixes your issue.


Mon Sep 20, 2010 9:01 am
Profile

Joined: Mon Sep 20, 2010 4:04 am
Posts: 3
Post Re: rounded corners on elements with borders
The odd thing is, I still get ugly black borders even if I set the border to go on all 4 sides.

I will give building from the latest js files a go and see if it fixes this. Been a long time since I had to 'compile' anything though...

/edit the ie specific css rules only tweak the width of the header. the border styling is the same for every browser


Mon Sep 20, 2010 10:41 am
Profile

Joined: Mon Sep 20, 2010 4:04 am
Posts: 3
Post Re: rounded corners on elements with borders
just built from the latest source and it does indeed fix my issue - thanks a lot and keep up the good work :)


Tue Sep 21, 2010 2:31 am
Profile

Joined: Wed Sep 29, 2010 5:54 am
Posts: 3
Post Re: [solved] rounded corners on elements with borders
Hi there...
I'm currently doing tests on my website and had the same issue with IE6 + PIEb2 -- square borders still showing up on rounded corners.

So I took a try at recompiling the stuff. Took at least half an hour to get it right, and resort to using my SSH access to compile remotely -- how 'bout making some automatic online generator to distribute a proper usable version of the latest build? That would be nice.

Indeed, the latest beta fixes it. However, it also adds a lot of problems. For instance, when clicking a Javascript-enabled feature on a page, all of the rounded corners suddenly disappear. This makes me think that borders are redrawn permanently. Isn't it an issue, performance-wise? I think PIE should disable itself after rendering the corners. Or, at least providing an option to do so (it's unlikely that one would change the border-radius dynamically after loading a page.)

Anyway. On to the border problem... I diff'ed between beta 2 and the latest build, and analyzed the code. I couldn't really find the 'fix'. After a while, I started playing with the rendering functions. In the end, here's what I did:

In hideBorder(), in beta 2:

Code:
        if( tag === 'BUTTON' || ( tag === 'INPUT' && el.type in { 'submit':1, 'button':1, 'reset':1 } ) ) {


I simply replaced it with if (true) to see what this codepath would do on IE6...
And guess what? It fixed my problems. Fixed all of them, actually. Right now, this is the only solution that works perfectly on IE6 for my website. There are still a couple of problems (margin-top seems to be ignored on a rounded div, for starters), but no showbreaker.

Now, if I analyze the code I removed -- and compare it with the latest build -- I realize that the code block is only intended to be executed on elements that can not contain child elements. I'm not a Javascript/DOM specialist, but this strikes me as odd. Why would it work in the latest build, when obviously that code path isn't used either? Or maybe it is, I don't know, but in the latest, it adds this to the test: ( isIE6 && tag in this.childlessElements ) -- childlessElements being an array with such tag names as TABLE and IMG. Definitely shouldn't execute on my divs...

So, maybe I was lucky or something, but it DOES work, I can assure you of that.

Can someone confirm that I can safely use this codepath on IE6 in all situations, without any further issues? That's basically my question... (As well as a hint for Beta 2 users who would like to fix this bug as well.)

Thanks!

EDIT

I've found the reason why it doesn't work... My website defines window.XMLHttpRequest before PIE is called, so it's not detected as being IE6.
However, when using a stock version of Beta 2 and adding proper detection of IE6, the border problem is fixed, but any transparent PNGs located inside the rounded div will appear as opaque, even if using DD_belatedPNG to turn them transparent. This is a problem that was in Beta 3 and which I forgot to mention.
I think I'll resort to using the hack mentioned above. I'd rather have a hack that I don't understand and works perfectly, than a fix that breaks something else.


Wed Sep 29, 2010 6:04 am
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1441
Post Re: [solved] rounded corners on elements with borders
@Nao: Wow, that's a lot to address! :)

Quote:
how 'bout making some automatic online generator to distribute a proper usable version of the latest build? That would be nice.


Yeah I'll try to do something like that someday.

Quote:
For instance, when clicking a Javascript-enabled feature on a page, all of the rounded corners suddenly disappear. This makes me think that borders are redrawn permanently. Isn't it an issue, performance-wise? I think PIE should disable itself after rendering the corners. Or, at least providing an option to do so (it's unlikely that one would change the border-radius dynamically after loading a page.)


Can you provide an example of such a piece of JS that causes rounded corners to disappear?

I'm not sure what you mean by "borders are redrawn permanently" or what performance impact you're expecting. PIE does update itself as element styles change, and that's absolutely needed in many cases (think of hover effects, elements shifting around the page due to resizing the window, etc.) but it doesn't hurt performance because it just listens for events.

Quote:
Can someone confirm that I can safely use this codepath on IE6 in all situations, without any further issues?


I'm glad you traced the problem to the IE6 detection, that XMLHttpRequest sniffing was definitely bad.

The 2 code paths exist for IE6 because both of them suck, in different ways. Both are workarounds for IE6's lack of border-color:transparent support. The default one wraps all the children in a container element, and hides the outer element via visibility:hidden. The other one sets border-width:0 and increases the element's padding to adjust for it. The first approach sucks because it doesn't work on elements that don't allow child nodes, and because it messes up the parent-child relationship which can interfere with scripts. The second approach sucks because it substitutes padding for border which means positioned descendants won't be in the right place.

The current behavior, and what will likely remain the default behavior, is to use the second approach for elements which don't accept child elements, and the first approach otherwise. I do plan, however, on adding a custom CSS property which authors can use to manually choose which approach is used... -pie-ie6-border-hide:padding|wrap or something like that.

And please, if you have any better ideas for ways to hide the border in IE6, which don't suck quite as much, I'd love to hear them! :)


Thu Sep 30, 2010 10:55 pm
Profile

Joined: Wed Sep 29, 2010 5:54 am
Posts: 3
Post Re: [solved] rounded corners on elements with borders
jason wrote:
@Nao: Wow, that's a lot to address! :)

Sorry... I always strive for perfection ;)
I've been working on adding border-radius to IE6 for the last two weeks... Never found any solution that could do everything my site needs. The only perfection implementation is PIE + IE8. (Interestingly, DD_roundies has a correct implementation, but doesn't work in IE8 at all... I'm considering using BOTH scripts, one for IE6, one for IE7+8... Both that's a bit overkill.)

Quote:
Can you provide an example of such a piece of JS that causes rounded corners to disappear?

I'm afraid I can't. The JS is under a no-redistribution license. I guess I could paste parts of it, but it's likely that it's not going to cause the bug to reproduce.

Quote:
Quote:
Can someone confirm that I can safely use this codepath on IE6 in all situations, without any further issues?


I'm glad you traced the problem to the IE6 detection, that XMLHttpRequest sniffing was definitely bad.

It's not 'bad'. It's just that it's incompatible with Ajax-oriented scripts.

Quote:
The 2 code paths exist for IE6 because both of them suck, in different ways. Both are workarounds for IE6's lack of border-color:transparent support. The default one wraps all the children in a container element, and hides the outer element via visibility:hidden.

Which in turns renders opaque any PNG shown over these divs -- even if they're rendered through DD_belatedPNG.

Quote:
The other one sets border-width:0 and increases the element's padding to adjust for it.

Which makes the PNG image work, but on the other hand it seems to be noticeably slower when using a lot of divs.

Quote:
And please, if you have any better ideas for ways to hide the border in IE6, which don't suck quite as much, I'd love to hear them! :)

Sorry, no idea... I suppose you already looked into the other existing solutions, since you mention them on your website. (Thanks for that, BTW.)

Now I've stumbled upon yet another issue...
PIE is still very slow. I looked into the uncompressed htc and started ripping out all of the non-border-radius emulation code. I really removed a lot of things, and ended up with a 71KB file. Then I built a custom compressed version using your ant tool, which reduced the overall filesize to a mere 18KB. Great! Then I tested under IE6... It's way, way faster. Probably 30% faster (at least a second or two on a Core2Duo computer.)
This version works great in both IE7 and IE8, too. In IE6, it works everywhere... Except when it doesn't. I often get an "Operation Aborted" error while rendering the page. Mostly it happens when browsing, rather than refreshing a page. I Googled that and apparently PIE is adding DOM elements inside an element that's not currently closed. Now, I *think* this might be due to your "child elements" approach (i.e. the IE6-only path). If I force IE6 to only use the INPUT/BUTTON path, it doesn't seem to trigger the error. It's back to 'slow mode' though... But I'd rather have a slow IE6 than risking an Operation Aborted error.
I haven't yet tested to see if beta 3 triggers the same errors for me. I guess it would. (It doesn't happen all the time so maybe I just didn't try hard enough.)

As of now, I'll keep using PIE but will consider dropping it entirely for IE6. Sometimes, you gotta unplug life support... And it's not like anyone ever actually liked that old IE6 geezer anyway.


Fri Oct 01, 2010 3:47 am
Profile

Joined: Wed Sep 29, 2010 5:54 am
Posts: 3
Post Re: [solved] rounded corners on elements with borders
Posting again... Thought you might be interested in knowing that the Aborted error also triggers in the latest build, and that is *indeed* due to the firstChild/appendChild/appendChild code block in hideBorders().
I tried simply deleting the while() and the appendChild that follows it, and (although obviously the div contents no longer shows up), I can no longer get the Operation Aborted error.
I've read online that "insertBefore" doesn't have the same behavior as "appendChild" (and the unusued "innerHTML"), and can be used to fix such errors. I was unable to confirm this, unfortunately. Maybe because firstChild/lastChild also triggers the error.

I'm a bit out of ideas... So now it's back to using the INPUT/BUTTON solution all the time.
Meanwhile, I made speed tests on IE6/7/8 and IE6 is way, way slower. (Always takes at least 5 seconds to load a busy page... If not 10!)
Given that computers using IE6 probably are even worse than mine, it's probably not worth considering supporting IE6 at all, at least for rounded corners. So I'll just take my leave now. If IE6 users want pretty content, they can install Firefox or Opera. If they can't, well... Adding support for rounded corners in IE6 is worth nobody's time... Certainly not 2 weeks!

Still, I hope I gave enough food for thoughts!


Fri Oct 01, 2010 9:41 am
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 8 posts ] 

Who is online

Users browsing this forum: Bing [Bot] 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.