Android browser bug with CSS transitions and visibility: hidden

CSS

Add

Recently I came across a weird bug with Android browser that had me pulling my hair out, so thought I’d document it here in case anybody else comes across the same issue.

I was using CSS transitions to slide a list of navigation items in from the side of the page. Here’s a basic example of the SCSS:

.nav {
	position: absolute;
	top: 0;
	left: 0;
	visibility: hidden;
	width: 200px;
	transform: translate3d(-200px, 0, 0);
	transition: all 300ms ease;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.6);

	&.active {
		visibility: visible;
		transform: translate3d(0, 0, 0);
	}
}

I then just had some simple jQuery which toggled the active class when a button was clicked so the nav slid in smoothly from the right.

This all worked fine in Chrome, Firefox mobile, Safari iOS, but it just didn’t seem to work at all on some older Android devices using the native Android browser.

After a lot of debugging I discovered that the issue was being caused by the visibility: hidden declaration, which I’d added in to hide the box-shadow when the navigation wasn’t in view. I’ve no idea why this was causing problems with Android, but removing it fixed the problem.

Here’s what I adjusted my SCSS to:

.nav {
	position: absolute;
	top: 0;
	left: 0;
	width: 200px;
	transform: translate3d(-200px, 0, 0);
	transition: all 300ms ease;

	&.active {
		box-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
		transform: translate3d(0, 0, 0);
	}
}

Here’s a demo. Hope this helped.

Photo stacks using CSS transforms and box-shadow

CSS

Add

This has probably been solved a few different ways elsewhere on the Internet, but thought I’d share a simple photo stack effect I put together using CSS3 transform: rotate(); to rotate each element and box-shadow to create the effect of them being sat on top of one another.

Here’s a working demo. The CSS is pretty self-explanatory really.

Browser support

A quick list of browser support:

  • Firefox 3.6+
  • IE9+
  • Chrome 4+
  • Safari 4+
  • Opera 10+

Older browsers will simply default to the image with a 6px white border. However, if you really want support for older versions of IE then you might consider taking a look at Microsoft’s BasicImage Filter:

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

Firefox 7 and text-overflow: ellipsis

CSS

Add

Another version of Firefox has been released and with it another nice new CSS3 property: text-overflow: ellipsis;. This will allow you to display an ellipsis (…) if any text overflows its containing element, making something which used to have to be done with JavaScript or on the server-side now much easier. You will, however, need to include some extra CSS properties to force the any text-overflow to take place:

p {
	width: 300px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

Support across other browsers is also very good with support from IE6+, Opera 11 (9-10 using the -o- prefix), Chrome and Safari.

« Older Entries