ggordan | Gordan Grasarevic

CSS issue with Firefox and Opera

Update – The Opera team has responded very quickly to fix the bug regarding positioned elements with a rotate transformation, on the next iteration of their browser, 12.10.

In this post I explain two issues I ran into when creating the “logo” for this site. One occurs on Firefox and Opera 12.02 when using the border, box-shadow, and border-radius properties on one element, and the other appears on Opera when attempting to rotate an element 180degrees that has a position of either absolute, or fixed.

A process all of us (should) go through when developing a web page is testing it on various browsers (usually the big 4) to ensure that it renders correctly in all of them. Now, if like me, you’re working on a Mac, you’re going to have a problem when in comes to testing on Internet Explorer. Fortunately, there are a few solutions that can help you with this. I wont go into extensive detail about them since this post isn’t about that, so here’s a very short list:

Anyway, back to business. When ‘designing’ this site, and I use that term very loosely, I wanted to use no images and rely mostly on CSS3 to achieve the look I wanted. With the exception of the grainy background of the sidebar, I feel like I managed to achieve this. The biggest issue I faced was designing my ‘logo’. I should note that this site uses LessCSS which is a dynamic stylesheet language, so if some properties don’t make sense, chances are they’re a part of LessCSS syntax.

div.logo {
	position: absolute;
	height: 100px;
	width: 100px;
	background: #ca314a;
	border:10px solid #fff;
	.box-shadow(inset 0px 3px 3px #7e2433);
	z-index: 2;

The code above would render the logo absolutely fine (as seen on the site) on Webkit browsers, but on Firefox and Opera there would be a strange border which is visible against lighter colours, as seen below.

This issue seems to arise when using a combination of border, box-shadow, and the border-radius properties on one element. The solution for this problem was relatively straightforward, and it was to replace the border with another box-shadow like so:

.box-shadow(~"0px 0px 0px 11px #fff, inset 0px 3px 3px #7e2433");

The other issue I ran into was when rotating the second letter ‘G’ 180 degrees on Opera. It seems that it doesn’t like that very much (Open that link on Opera). Rotating the element to any other degree will work fine, but if you rotate it 180/-180 degrees and set the position to either absolute or fixed, the transformation will be ignored. Anyway, the upside-down letter G on Opera has been rotated 179 degrees in the meantime since visually there is very little difference.

comments powered by Disqus