posted by Development
Among the ramifications of being a front-end Web developer is that we’re constantly introduced to unusual new quirks from Web browsers. Today, we bring you a strange rendering quirk from some of the least-quirky browsers. We've observed it on iPad's Safari and on newer versions of Firefox for the Mac. Need a refresher on how browsers affect the way a page displays? Read our recent post on Web pages.
Identifying the problem
We’ve noticed when we zoom in or out on a Web page to a ratio that isn't a multiple of two (such as 150 percent or 66 percent), the site will sometimes have strange lines running through it. Sometimes not. What's going on? The browser is rounding.
The positions and sizes of elements are specified in the website's style programming. When the zoom is applied by the browser, those numbers get an even coefficient across the board – one that can have some very uneven results. If 150 percent of five pixels can't be 7.5 pixels, should the browser make it seven or eight pixels?
In actuality, it doesn't matter, as long as the browser cleans up any unevenness so the elements that are supposed to be adjacent are rendered as such. The problem is, it doesn't.
Let's say you have two elements - one on the left and one on the right. The left element's width is rounded down, the right element's position (rightward from the left) is rounded up, and a gap appears.
The problem seems to occur more in Firefox than in iPad's Safari, because iPad's Safari occasionally activates
sub-pixel rendering. Sub-pixel rendering, while slower, not only solves this problem but produces a smoother image.
Key takeaways
There is no way to sidestep this problem completely. However, it does tend to occur more often on ambitious, visually creative Web designs where images need to be pieced together. Once better ways of programming complex visuals become more available, we hope to eliminate the process of piecing together images in this manner.
Before declaring this problem completely unacceptable, try this: Go to Google Maps in Firefox Mac (we used version 6), click Satellite view and zoom in using your browser (keyboard shortcuts: Command-Plus and Command-Minus -- not using the built-in Google Maps controls). The lines appear because the map elements are absolutely positioned! It appears in both the Map and Satellite, but because the background is light gray, the problem is much more visible with Satellite.
These issues are common on the Web. They don't make the browser developer's must-fix-now list because while it may affect users' perceptions of your brand, it doesn't bother the user - and the user is the browser developer's consumer, not site developers or brand owners.
About the author::
Benjamin John is an interactive developer at thunder::tech, specializing in front-end Web development.
TAGS:
thundertech, Development, web, Internet, browsers, quirk, zooming, lines, web page, pages, browser, issues, zoom, error, sub-pixel rendering, developer
Related Posts
0 Comment(s)
|
There are no comments. Be the first!
|
|