Skull Jackpot » opera http://skulljackpot.com Various thoughts of minimal interest to others Fri, 25 Feb 2011 16:22:46 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Right makes (Opera) wrong http://skulljackpot.com/2009/01/23/right-makes-opera-wrong/ http://skulljackpot.com/2009/01/23/right-makes-opera-wrong/#comments Sat, 24 Jan 2009 03:51:21 +0000 Chris http://skulljackpot.com/?p=34 In the course of redesigning the new TOPP website, I ran into another odd renderbug which I wanted to document.

The design for the new site includes two drop-down menus (for "About Us" and "Our Work"), and we went with an approach based on the classic Suckerfish menus. Pretty easy to implement, and looked great in our initial design passes. When I went to do some regression testing, I found that Opera was was badly misrendering the menus.

]]> In the course of redesigning the new TOPP website, I ran into another odd renderbug which I wanted to document.

The design for the new site includes two drop-down menus (for “About Us” and “Our Work”), and we went with an approach based on the classic Suckerfish menus. Pretty easy to implement, and looked great in our initial design passes. When I went to do some regression testing, I found that Opera was was badly misrendering the menus:

opera-topp-menus-misrender

All other browsers were displaying the menus as-intended (even IE6, due to a quick little jQuery function to add the relevant classes on mouseover).

As I was playing with possible resolutions to the problem, I stumbled onto an odd fact. The problem only appeared when the nav was aligned to the right. Floating the nav to the right triggered the renderbug, as did positioning it to the right. Unfloated navs behaved correctly, as did ones which were floated or positioned left.

For launch, we went with a left-floated nav, but that prevents the nav from reliably being aligned with the right edge of the parent container (since font sizes can be adjusted independently of page zoom).

After launch, I did some digging to isolate the problem, and to write up a bug report for Opera. I also came up with a test case illustrating the issue.

The problem only manifests when the dropdown menus extend below the calculated bottom of the content within the <body> element. Since all the content on the TOPP site was floated, and floated elements are removed from the normal document flow, Opera effectively thought the pages were zero-height.

Somehow, floating or positioning the nav to the right is tripping up Opera’s redraw logic for the dropdown menus, if those dropdowns extend below the calculated bottom. Why right-floated or right-positioned elements trigger this renderbug, while left-floated or left-positioned elements behave correctly is still a bit of a mystery.

I’ve written up my test case and submitted a bug report to Opera. Opera unfortunately doesn’t have good transparency into their bug-tracking process, so I can’t link to my report, and folks can’t upvote the bug, but hopefully it’ll be fixed before too long.

]]> http://skulljackpot.com/2009/01/23/right-makes-opera-wrong/feed/ 0