WordPress.org

Make WordPress Core

Opened 5 years ago

Closed 5 years ago

Last modified 5 years ago

#8933 closed defect (bug) (fixed)

jQuery/Thickbox Issue IE7/8

Reported by: alexleonard Owned by:
Milestone: 2.7.1 Priority: normal
Severity: normal Version: 2.7
Component: JavaScript Keywords: has-patch commit
Focuses: Cc:

Description

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.

Attachments (6)

WP-Thickbox-Error--IE7.png (84.2 KB) - added by alexleonard 5 years ago.
Screen Shot of error in IE7 - viewing the plugin browser
WP-Thickbox-Error--IE8.png (52.8 KB) - added by alexleonard 5 years ago.
Screen Shot of error in IE8 - viewing the plugin browser
8933.diff (1.1 KB) - added by Denis-de-Bernardy 5 years ago.
obsoletes previous patch -- check for xmlhttprequest to nail ie6
8933-script-loader.diff (1.2 KB) - added by Denis-de-Bernardy 5 years ago.
bump thickbox.js version in script loader
8933-css.diff (503 bytes) - added by Denis-de-Bernardy 5 years ago.
8933-css.2.diff (577 bytes) - added by Denis-de-Bernardy 5 years ago.
updated css diff

Download all attachments as: .zip

Change History (35)

alexleonard5 years ago

Screen Shot of error in IE7 - viewing the plugin browser

alexleonard5 years ago

Screen Shot of error in IE8 - viewing the plugin browser

comment:1 Denis-de-Bernardy5 years ago

  • Component changed from UI to JavaScript
  • Keywords needs-patch added; ie7 ie8 internet explorer thickbox error positioning removed
  • Owner set to azaozz

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

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

comment:2 alexleonard5 years ago

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.

comment:6 Denis-de-Bernardy5 years ago

  • Owner azaozz deleted

comment:7 Denis-de-Bernardy5 years ago

  • Keywords dev-feedback added

comment:8 Denis-de-Bernardy5 years ago

  • Summary changed from Thickbox Issue IE7/8 to jQuery/Thickbox Issue IE7/8

comment:9 Denis-de-Bernardy5 years ago

  • Keywords has-patch needs-testing added; needs-patch dev-feedback removed

please try the patch I just uploaded.

comment:10 alexleonard5 years ago

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.

comment:11 Denis-de-Bernardy5 years ago

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.

comment:12 Denis-de-Bernardy5 years ago

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

comment:13 filosofo5 years ago

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-Bernardy5 years ago

obsoletes previous patch -- check for xmlhttprequest to nail ie6

comment:14 alexleonard5 years ago

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;

}

comment:15 Denis-de-Bernardy5 years ago

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

comment:16 alexleonard5 years ago

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.

comment:17 follow-up: alexleonard5 years ago

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-Bernardy5 years ago

bump thickbox.js version in script loader

comment:18 Denis-de-Bernardy5 years ago

  • Keywords tested added; needs-testing removed

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

comment:19 Denis-de-Bernardy5 years ago

  • Milestone changed from 2.8 to 2.7.1

comment:20 Denis-de-Bernardy5 years ago

Cross-referencing a related bug: #8936

comment:21 in reply to: ↑ 17 ; follow-up: filosofo5 years ago

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

comment:22 in reply to: ↑ 21 alexleonard5 years ago

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.

comment:23 Denis-de-Bernardy5 years ago

  • Keywords commit added; tested removed

done

Denis-de-Bernardy5 years ago

comment:24 alexleonard5 years ago

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-Bernardy5 years ago

updated css diff

comment:25 Denis-de-Bernardy5 years ago

ok. css patch updated.

comment:26 azaozz5 years ago

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.

comment:27 Denis-de-Bernardy5 years ago

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.

comment:28 azaozz5 years ago

  • Resolution set to fixed
  • Status changed from new to closed

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

comment:29 azaozz5 years ago

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

Note: See TracTickets for help on using tickets.