Page MenuHomePhabricator

Incorrect semantics for PNG images on IE 6
Closed, InvalidPublic

Description

Author: kliu

Description:
simple fix

The current IE 6 PNG alpha channel fixup method (see [[en:MediaWiki:Common.js/IE60Fixes.js]] and bug 2074) is flawed because it replaces original image element with a new span element that calls up the alpha loader.

The problem with this approach is that a span is semantically different than an image, and this means that parts of the browser UI--most noticeably the right-click context menu and copying-and-pasting a selection that contains an image--are broken by this. Of course, if it was a choice between having alpha-blended images display properly or having the correct semantics, I would choose the former, but it is possible to "have your cake and eat it too".

Only a few minor changes to the existing code are needed to do this.

  1. The original image element should not be removed; instead, the span should be inserted with the "position: absolute" style right before the image element as a sibling; this will ensure that the span element will be positioned in the exact same location as the original image (the two elements will now occupy the same space).
  1. The span element's z-index should be set lower than the image's, so that the span will appear underneath the image for purposes of user interaction. This ensures that if the user tries to interact with the image, the user will get the image itself and not the fixup span.
  1. Since the original image must be kept in the document tree in order to preserve semantics, there has to be another way to hide it: by using the opacity filter.
  1. Since the user would be interacting with the original image element, it would no longer be necessary to manually set the hand cursor for linked images, so that particular hack can be removed.

With these simple changes to the existing code (see attached patch), you can fix the IE 6 problem without breaking the semantics or the browser UI.

A demonstration of this can be found here:
http://code.kliu.org/misc/fixiepng/demo.html

Note that, in this demo, right-clicking the image allows you to save/print/e-mail the image, and it is possible to include the image in a selection.


Version: unspecified
Severity: minor
OS: Windows XP
Platform: PC
URL: http://code.kliu.org/misc/fixiepng/

Attached:

Details

Reference
bz18470

Related Objects

StatusSubtypeAssignedTask
DeclinedNone
InvalidNone

Event Timeline

bzimport raised the priority of this task from to Medium.Nov 21 2014, 10:37 PM
bzimport added a project: MediaWiki-Parser.
bzimport set Reference to bz18470.
bzimport added a subscriber: Unknown Object (MLST).

Since this script is not part of the MediaWiki software, I am marking this as invalid. But I invite you to post the fix for discussion and testing on [[en:MediaWiki_talk:Common.js/IE60Fixes.js]].

kliu wrote:

(In reply to comment #1)

Since this script is not part of the MediaWiki software, I am marking this as
invalid.

In bug 2074 comment 8, you marked that bug as fixed, saying that it was "implemented" in this particular file, which seems to contradict the statement that you just made in this bug. Could you please clarify what the status of IE60Fixes.js is?

davidg wrote:

Kai Liu: I think Erwin is kind of correct. He pointed you to the right talk page. The [[en:MediaWiki:Common.js/IE60Fixes.js]] file is loaded from [[en:MediaWiki:Common.js]]. Both are files local to the English Wikipedia and can be edited by admins on the English Wikipedia. Unfortunately this also means that any fixes applied in IE60Fixes.js will only benefit the English Wikipedia.

So I think that if/when we have used your suggested fix for a time at enwiki and if we feel it works well, then it probably is time to open a bug here and ask to have the fix moved to the global MediaWiki javascript files so it benefits all projects.

ayg wrote:

(In reply to comment #2)

In bug 2074 comment 8, you marked that bug as fixed, saying that it was
"implemented" in this particular file, which seems to contradict the statement
that you just made in this bug. Could you please clarify what the status of
IE60Fixes.js is?

[[en:MediaWiki:Common.js/IE60Fixes.js]] is used only on the English Wikipedia (and any other wikis that feel like copying it), and issues with it should be reported on its talk page. The only relevance it might have to Bugzilla discussions is as a source of ideas or copying.