Tag Archives: css3

November 17, 2014

Font rendering issues when using CSS transitions in WebKit

A couple of days ago, I was messing about with CSS3 transitions and I noticed that, in Safari at least, text rendering gets messed up for the duration of the transition. WebKit uses sub-pixel anti-aliasing for font smoothing by default; apparently this gets disabled when a GPU-accelerated CSS transition is executed, causing the text to be rendered using “regular” anti-aliasing.

I haven’t found a satisfactory workaround. This Stack Overflow thread recommends using either -webkit-transform: translateZ(0px); or, curiously, explicitly setting sub-pixel smoothing (-webkit-font-smoothing: subpixel-antialiased) even though it should be enabled by default. Either way, you’ll end up with a) thinner (and uglier) fonts even before a transition or b) a slightly less noticeable change—but a change nonetheless—in font rendering during a transition. It’s not an ideal situation.

Feel free to comment on this post if you know of a workaround that eliminates the problem without one having to force regular anti-aliasing.

Update: I found the original bug report, first filed in 2009 (!): https://bugs.webkit.org/show_bug.cgi?id=23364

January 20, 2014

Advanced layout made easy with CSS regions

CSS regions are an exciting technology that make it easier than ever to create rich, magazine-like layouts within web content. Regions have been under development in WebKit for a while now, and we’re delighted to tell you that they are available for use in Safari on iOS 7, Safari 7 on Mavericks, and Safari 6.1 on Mountain Lion.

It took a while to wrap my brain around how it works, but this seems really useful.

July 5, 2013
November 26, 2012
July 24, 2012

Site updates

I’ve made a few changes to the site during the past couple of weeks. Some of these changes are cosmetic, some are under-the-hood improvements.

The first change you will notice is that the design of the site header has been revised. By adding an inset CSS drop shadow to the header, I was able to bring the actual content area into better focus. Posts should always be the most prominent pieces of content on any weblog.

Another cosmetic has been made to text present on the site. All headings and paragraphs now sport a slight shadow, so that text “pops” and appears more crisp to the reader. If you’ve barely noticed anything, worry not — this shadowing is meant to be as subtle as possible.

I’ve also made selecting and copying text more pleasing to the eye. Users whose browser supports the ::selection pseudo-element will see a pleasant light blue background with black, non-shadowed text when highlighting something.

In addition to cosmetic changes, I’ve made some code changes as well. First, I’ve stopped using the Modernizr Javascript library on the site. Modernizr, though capable of much more, was primarily used on the site to support browsers that had not yet implemented HTML5 elements such as <header> and <article>. Nowadays, most modern browsers support these elements, so I elected to remove the script. As such, less Javascript is loaded, speeding up the site.

To further enhance performance, I enabled the use of Apache’s mod_rewrite to provide an efficient caching solution (the BarneyBlog has an excellent post on the benefits of using mod_rewrite).

Last, but definitely not least, resources are compressed using gzip via mod_deflate, resulting in less information being sent over the network. This improvement, along with mode_rewrite, should provide a noticeable boost in perceived speed for all users.

As always, feel free to contact me regarding any changes to the site. Reporting any unusual behaviour is particularly welcome.

February 3, 2011

20 Things I Learned About Browsers and the Web

A masterfully made online booklet by the Google Chrome team about web browsers and the web’s history in general. All of the cutting-edge technologies (HTML5, CSS3 etc.) are in use here.