Web Devout tidings

I finally figured out why Safari was displaying the heading backgrounds on the main Web Devout site too dark: In general, Safari 2.0 seems to screw up the brightness or gamma correction on 1-pixel by 1-pixel alphatransparent PNGs. This is even true for PNGs which don’t have any gamma correction information included. Interestingly, if you change the image size to anything else, the brightness problem goes away. Why does Safari decide to darken 1×1 PNGs? Your guess is as good as mine.

I was using a repeating 1×1 alphatransparent PNG as the background in order to simulate an RGBA value in a CSS 2.x-compatible way. To fix the problem in Safari, I simply changed the image size to 2×1.

I just wanted to point this out in case anyone else runs into it and becomes stumped like I was for a while. The problem seems unique to Safari/WebKit; Konqueror doesn’t seem to have this problem.

Frankly, this is just one of a seemingly endless list of bang-your-head-on-the-desk bugs I regularly find in Safari in quite basic areas. Another one that bothered me for a while was that background images in Safari will repeat if the box is shorter or thinner than the background image even if you have background-repeat: no-repeat;, which you’ll notice if you also use a background-position. This just shows that passing something like Acid2 first doesn’t necessarily mean you’re the cream of the crop. Please exterminate these weird bugs.

There were some premature announcements around the blogosphere the last couple of days, but Firefox 2 has now been officially released. It is primarily a user interface upgrade. Some of the changes include a built-in inline spell checker, a built-in phishing site detector originally developed by Google, automatic session restoration in the event of a crash, a search engine manager, new icons and tab styles, and other odds and ends.

In terms of standards support, very little has changed. Almost all platform development work since Firefox 1.5 has been going into Gecko 1.9 development which will be rolled into Firefox 3, to be released next year. This was done to allow extra time for the major improvements that are being made for Firefox 3. Some of the platform improvements in Firefox 2 include JavaScript 1.7 with client-side session and persistent storage support from the Web Applications 1.0 working draft (an open standard-in-development, although not affiliated with the World Wide Web Consortium) and improvements to SVG support.

You can download Firefox 2 from the Mozilla website. Firefox 2 will be rolled out as an automatic update for Firefox 1.x users within the next few days.

Internet Explorer 7, the first platform update in over five years, has now been officially released as a finished product. IE7 offers a new user interface with some added features long offered by other browsers, as well as a few unique gadgets. To help reduce the impact of security vulnerabilities, they have added a phishing site detector similar to the ones the soon-to-be-released Firefox 2.0 and Opera 9.1 will have, and they have also made ActiveX an opt-in feature. Most of the vulnerabilities themselves will likely carry on from IE6 to IE7, and the Internet Explorer development team has indicated that their response to security vulnerabilities will remain basically the same as it was with IE6.

Most importantly for web developers, IE7 offers some long-overdue improvements to its support for web standards, mainly in the area of CSS. Some of the most annoying bugs in real-world web development, such as the non-definite treatment of the height and width properties and various float and margin bugs, have been fixed. There is now at least preliminary support for min-height, max-height, min-width, max-width, position: fixed, and background-attachment:fixed on more elements. Box stretching using the top, right, bottom, and left properties is now supported. :hover is now supported on additional elements, although there are a few bugs with it. .class1.class2 now works as expected. :first-child, the > combinator, the + combinator, attribute selectors, and other new selectors are now somewhat supported, though with a few show stopping bugs (see below). PNGs are apparently now automatically routed to the AlphaImageLoader filter, enabling alphatransparency without the need for extra hacks. There are some known problems with this new implementation, particularly when using PNGs as backgrounds in combination with other Microsoft filters. There is a new XMLHttpRequest object that similarly wraps the ActiveX control, providing a native-like interface to the object. The abbr element is now supported as well.

These improvements have cleared out a lot of the immediate rubble that was in our way on the path to standards, but it is only the first milestone on a long journey. All of the above CSS additions still have a number of bugs that are left to be addressed in future releases. Many other bugs are also unaddressed in IE7. The problematic hasLayout model still exists in IE7, and even more properties trigger it than before. :focus, :lang, :after, :before, border-spacing, caption-side, clip, content, counter-increment, counter-reset, display:table, display:table-row-group, display:table-row, display:table-column-group, display:table-column, display:table-cell, display:table-caption, empty-cells, many list-style-type values, outline and related properties, quotes, and the inherit values on nearly all properties remain completely unsupported despite other major browsers offering good support for all of them. Furthermore, there are some serious new bugs, including one that prevents floats from being cleared in certain situations, as well as a fundamental problem with selectors that prevents :first-child and sibling combinators from behaving correctly around HTML comments or other non-element constructs. I personally reported the most serious of these bugs to Microsoft during the beta process, but these problems still remain in the final release.

Other remaining issues include the complete lack of support for XHTML (XHTML pages served with the typical text/html content type header are instead treated like regular HTML, not XHTML, by most browsers including Internet Explorer; the correct content type is application/xhtml+xml, which IE still doesn’t support), broken support for the object element for simple tasks like embedding images, incorrect support for the q element, no support for alternate stylesheets, and no significant work done on the scripting engine other than providing a native-like wrapper for the XMLHttpRequest object, providing interfaces for the new CSS properties, and fixing some memory leaks. More standards support information can be found in the Web browser standards support section.

The high-priority automatic update is expected to be deployed sometime in November, most likely either on the 1st or on November’s Patch Tuesday (the second Tuesday of the month). Internet Explorer 7 is only supported on Windows XP SP2 and the upcoming Windows Vista. Internet Explorer 7 can be downloaded from the official Internet Explorer site.

All-in-all, the developers did put a lot of work into this release and made about as much progress as one can expect in the time they had. Still, they were very far behind to start with, given the project’s long slumber from back in 2001, and it looks like Internet Explorer will continue to make up our development ceiling for the foreseeable future. Here’s to hoping for steady improvements in the future.

From previous announcements, it is expected that Microsoft will release a new version of Internet Explorer approximately every 12 to 18 months. Indications are that the next version will improve on CSS support as well as scripting/DOM support. Some early SVG support is also a possibility, although there hasn’t been confirmation on this.

For such an important attribute, it’s strange that the title attribute doesn’t have better support than it does in modern web browsers. title is used to provide secondary descriptive text about an element, often rendered as a tooltip on mouse hover. Unfortunately, all major web browsers have bugs with whitespace and/or character reference handling on this attribute, making the feature often unusable for multiple-line texts.

I have constructed a title attribute tooltip test suite which I would like all major browsers to pass. Currently, Internet Explorer, Firefox, Opera, Safari, and Konqueror all fail at least one of the tests.

Internet Explorer allows line breaks in the tooltip value, but in the incorrect manner: it will display a line break if there are newlines or carriage returns in the source HTML. Newlines in the attribute source should be ignored and carriage returns should be converted to spaces, as in other CDATA attribues. The proper way to represent a line break in the attribute value is to use a newline character reference (
), which Internet Explorer also (correctly) converts into a line break. IE also handles tab characters in the source incorrectly.

Firefox has perhaps the most disruptive bug, which limits the tooltip text to a small number of characters on a single line. Progress on fixing that bug is blocked by another bug relating to the calculation of tooltip heights. Firefox also has several problems with newlines, carriage returns, and tabs in the source HTML and doesn’t convert newline character references into line breaks. This is overall the worst implementation of the title attribute of all major browsers.

Opera fares well in the whitespace handling, but it doesn’t convert newline character references into line breaks, making multi-line values impossible.

Safari makes line breaks on newlines and carriage returns in the source and uses tab characters for wide spacing instead of ignoring the newlines and converting carriage returns and tabs into spaces.

Konqueror generally does well, but it handles newline characters in the source like Internet Explorer does. I would say this is the best implementation so far, although still not perfect.

With the growing amount of web-based applications aiming to provide the functionality and feel of traditional desktop applications, proper tooltip display of the title attribute value is becoming increasingly important. Please petition the browser developers for attention to this issue.

Edit: I’ve corrected the link to the Firefox bug report. The previously linked report was specifically for Mozilla/SeaMonkey.

Chris Wilson, group program manager for the Internet Explorer platform team at Microsoft, recently referred in his blog to an e-mail conversation we had when my standards support resource was fairly new and undeveloped. He wrote in his blog post:

Most unfortunately, there are no more details on many of the problems David encountered, or test cases that my team can test against. When I contacted David a year or so ago, he couldn’t give me any further details, so I’m not even sure how we make progress against that site. Solid test cases we can access and bug reporting would help

Back when he first contacted me, I admit that my tables were quite vague and not nearly as useful as I believe they are today. I have since done a lot of work trying to make my wording in the support descriptions accurate and informative enough to easily fashion test cases from them. But I also recognize that having such test cases readily available would definitely help.

Therefore, I have developed a (non-exhaustive) set of tests for many of the most common IE7 CSS bugs described in my support tables. The mass test case is made to be easy to read and the issues are documented in the source.

Some CSS issues, such as with the cursor property, obviously can’t fit into this format very easily, so I left them out of the tests. But overall, I think this test case covers most of the important issues of immediate concern. Once Internet Explorer supports :before and :after (in some version after IE7), there will be many more features to test.

I will send this test suite to Chris Wilson and continue to participate through the Internet Explorer feedback system.