In the recently released version 0.8 of imgAreaSelect, I introduced the borderOpacity option, which (as the name implies) allows you to set the opacity of the selection area border. It’s set to 0.5 by default, making the border semi-transparent, and giving the plugin a slightly more attractive look (at least in my opinion).
I didn’t expect that such a simple change might lead to any kind of a problem, but, well, having been dealing with browser bugs for the past few years I should have known better. The semi-transparent border looks and behaves fine in all browsers except one. Can you guess which one? Yeah, that was too easy — of course it’s Internet Explorer.
IE6 and IE7 display the border incorrectly when the selection area is being resized. The dashed border suddenly appears as if it was a solid line. Here’s the correct rendering in Firefox:
And this is how IE6 and IE7 render it while resizing:
It gets back to normal when the mouse cursor moves over the selection area. OK, so this is what happens in IE6 and IE7 — I thought that the super-standards-compliant IE8 would get this right, but I was waaay wrong. In fact, it seems IE8 takes this bug to the next level, as it displays the border incorrectly all the time, even if no resizing is taking place.
I’ve investigated this issue a bit and discovered that the border is not really turning into a solid line, it’s just that the empty space between dashes gets filled with white. And since the top-level dashes are also white (that’s the default value of borderColor2), it looks like a solid line. Interestingly, this only happens if the border is exactly one pixel wide.
I found out that the bug has already been reported to the IE8 team at Microsoft, so there’s a slight chance that it will be fixed in the final version that’s supposed to come out in the next few months. Nevertheless, I still had to find a workaround to at least make it work correctly in IE6 and IE7.
The fact that moving the mouse pointer over the bordered div seemed to fix the problem gave me hope that I might be able to force the div to be repainted, for example by playing with its margin/padding properties. And it turned out to be partially true — toggling the margin property between "0" and "auto" (which is visually the same) makes the border fine again. So basically, every time the selection area was being updated, I had to do this:
$border1.add($border2).css('margin', '0');
$border1.add($border2).css('margin', 'auto');
Or, not exactly this. Unfortunately, it only works if the incorrect “solid” border is actually rendered first. There must be some delay after the first .css() call to let IE draw it incorrectly, then the second call fixes it. Putting the second call in setTimeout() does the trick:
$border1.add($border2).css('margin', '0');
setTimeout(function () { $border1.add($border2).css('margin', 'auto'); }, 0);
This method has a side effect of causing the border to flicker a bit — it’s barely noticeable, but still. Additionally, it doesn’t do any good in IE8, as that bastard just fills the empty spaces with white no matter what. All in all, it’s an ugly and insufficient workaround, but it’s the best I’ve come up with so far. If anyone knows of or has an idea for a better solution, please let me know.
Regardless of whether I find a better workaround or not, imgAreaSelect 0.9 is going to support image-based borders, allowing you to effectively circumvent all this border-related stupidity of Internet Explorer.
