jQuery/Thickbox Issue IE7/8

[alexleonard]

I've noticed an issue with Thickbox in IE7 and 8.

I first noticed it through use of the Auto Thickbox plugin which utilises WP's implementation of Thickbox and is discussed at this thread: ​http://forum.semiologic.com/discussion/4995/auto-thickbox-display-issues-ie78/

I have tested Thickbox in IE7 and 8 using the admin area of a test site over at: ​http://devel.invisibleagent.com and have reached these conclusions:

IE7 - Thickbox positioning incorrect on theme browser and plugin browser - top of the thickbox window appears at 50% of the browser height.

IE8 - Thickbox positioning on theme browser and plugin browser as per IE7 - in addition, the overlay behind the thickbox window is completely black - ie. no transparency effect.

I attach screenshots of the plugin browser as a sample.

[alexleonard]

Screen Shot of error in IE7 - viewing the plugin browser

[alexleonard]

Screen Shot of error in IE8 - viewing the plugin browser

[Denis-de-Bernardy]

Adding to this ticket, the plugin he's using is:

​http://wordpress.org/extend/plugins/auto-thickbox/

[alexleonard]

Following a suggestion by Denis, I've tested this in a fresh install of WordPress, using the default theme, with no plugins active, and the behaviour is the same.

[Denis-de-Bernardy]

the likely problem and fix:

​http://jamazon.co.uk/web/2008/03/14/jquerybrowserversion-doesnt-recognise-ie7/

[Denis-de-Bernardy]

other potential fix:

​http://wordpress.org/support/topic/179425#post-902170

[Denis-de-Bernardy]

the jQuery bug for reference:

​http://dev.jquery.com/ticket/2661#comment:6

[Denis-de-Bernardy]

please try the patch I just uploaded.

[alexleonard]

Patch fixes issue in IE7, but no change for IE8 Beta 2.

Issue could be unrelated to the browser-version issue resulting from IE7's incorrect user-agent reporting.

[Denis-de-Bernardy]

there is also code here that may potentially be worth adding:

​http://jamazon.co.uk/web/2008/07/23/an-ie7-bug-that-returns-msie-60-user-agent-string/

---

A possible patch below redefines the browser version as 7.0 only if the browser has already been identified as IE6 and the the presence of the XMLHttpRequest object suggests otherwise.

if(jQuery.browser.msie && parseInt(jQuery.browser.version) == 6 && this.XMLHttpRequest) { jQuery.browser.version = "7.0" }

I’m thinking though that maybe this might not be bulletproof. If IE8 presents the same or similar "Hi i'm IE6!" behaviour then the above patch could incorrectly identify IE8 as IE7. This might not be as serious as IE7 vs. IE6 but it’s still an issue.

[Denis-de-Bernardy]

Actually, that makes sense -- I'll update the patch for you to test.

[filosofo]

Keep in mind that jQuery 1.3, which I think WP trunk is already using, has removed its built-in browser sniffing, so probably both the existing thickbox script and your patch will break.

Also, one way to distinguish between ie6 and ie7 is window.XMLHttpRequest, which exists for ie7 (and Firefox, Safari, etc.) but not for ie6.

[Denis-de-Bernardy]

obsoletes previous patch -- check for xmlhttprequest to nail ie6

[alexleonard]

Regarding patch 8933.diff, that fixes the positioning error in IE8beta2, however the opacity issue in the background still remains.

I assume IE8 is ignoring the opacity rules in the style sheet as per:

.TB_overlayBG {

background-color:#000;
filter:alpha(opacity=75);
-moz-opacity: 0.75;
opacity: 0.75;

}

[Denis-de-Bernardy]

updated patch to check for XMLHttpRequest instead of multiple regexp.

I'm not too worried about jQuery 1.3 breaking Thickbox. From the looks of it, its author is no longer maintaining it. WP may end up switching to using DOMWindow (by the same author) instead:

​http://codylindley.com/thickboxforum/comments.php?DiscussionID=1435

​http://swip.codylindley.com/DOMWindowDemo.html

[alexleonard]

The latest change, "01/23/09 15:53:53 changed by Denis-de-Bernardy" works in IE7 and IE8beta2.

I'm having an argument with IE Tester at the moment so will get back to confirm no issues with IE6, but I don't anticipate any issues.

The opacity issue remains with IE8, but am investigating alternative css options.

[alexleonard]

IE8 opacity issue may be wholly dependent on the IE8 team - apparently there's no CSS opacity support and they've dropped the non-standard filter: alpha(opacity=0.x) option (which is good of course).

Not a major concern as it is a beta release, so should not affect normal users.

[Denis-de-Bernardy]

bump thickbox.js version in script loader

[Denis-de-Bernardy]

Great. I've uploaded an additional patch to bump the thickbox.js version.

[Denis-de-Bernardy]

Cross-referencing a related bug: #8936

[filosofo]

Replying to alexleonard:

IE8 opacity issue may be wholly dependent on the IE8 team - apparently there's no CSS opacity support and they've dropped the non-standard filter: alpha(opacity=0.x) option (which is good of course).

IE8 uses -ms-filter, I believe. See ​http://www.quirksmode.org/css/opacity.html

[alexleonard]

Replying to filosofo:

Replying to alexleonard:

IE8 opacity issue may be wholly dependent on the IE8 team - apparently there's no CSS opacity support and they've dropped the non-standard filter: alpha(opacity=0.x) option (which is good of course).

IE8 uses -ms-filter, I believe. See ​http://www.quirksmode.org/css/opacity.html

Ok

I'm not sure how to add a diff, but if you add a new line to wp-includes/js/thickbox/thickbox.css

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";

at line 36 that sorts it.

[Denis-de-Bernardy]

done

[alexleonard]

Hey Denis,

Just to clarify, as far as I'm aware that -ms-filter should appear before any use of "filter: alpha(opacity)" as per recommendation:

.opaque {
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; // first!
	filter: alpha(opacity=50);					// second!
}

If you don’t use this order, IE8-as-IE7 doesn’t apply the opacity, although IE8 and a pure IE7 do.

As per advice on the quirksmode site.

[Denis-de-Bernardy]

updated css diff

[Denis-de-Bernardy]

ok. css patch updated.

[azaozz]

This isn't a jQuery problem, it's because Thickbox is not maintained any longer. So the question is: are we going to maintain Thickbox or switch to another similar script. DOMWindow looks good but requires some of the jQuery UI components.

[Denis-de-Bernardy]

agreed, but in the meanwhile, we should probably fix thickbox. It's in WP 2.7, and it definitely needs a fix in 2.7.1.

[azaozz]

(In [10427]) Fix Thickbox positioning for browsers pretending to be IE6, props Denis-de-Bernardy, fixes #8933

[azaozz]

(In [10428]) Fix Thickbox positioning for browsers pretending to be IE6, props Denis-de-Bernardy, fixes #8933 for trunk