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.
- 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).
- 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.
- 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.
- 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: