HN Explorer

12 comments

[ 4.6 ms ] story [ 41.5 ms ] thread
thefreshteapot
Very nice effect. Very very smooth on Firefox Aurora with plenty of ram.

Is it possible to make this CSS effect work on the iphone? Is it a matter of tweaking the CSS or is it due to the limitation of the iOS Browser? Im curious of how smooth it looks on the iPhone. Would happily have checked a different mobile... but I dont have one of those.

html5web
As far as I know, it's possible to make it work on iOS Safari browsers, as Safari mobile browser supports CSS animations, transforms and transition effects.
speg
It's works for me on iOS 6.
spobo
The door is just a border being resized with a transition. Borders can't be styled that well. So this effect is neat but not very usable imo.
go35
Why not use pseudo elements?

http://codepen.io/anon/pen/dpceK

edit: actually looks like it doesn't work in chrome. Anyone know why?

lloeki
You beat me to it.

I'd say it's WebKit — not just Chrome — since it doesn't work with Safari 6 either.

stan_rogers
Works for me in Chrome (22.0.1229.94 on Win7). There's nothing in the CSS to prevent it from working in Webkit.
SimHacker
And just what is the point of not using JavaScript? Are there browsers that support the latest CSS features but don't support JavaScript? Are there people who turn off JavaScript but expect animations to work?
lloeki
Things like GPU acceleration come to mind, and also having the visual style where it's actually relevant: in the stylesheet.
Evbn
The edges don't align on Android, the image peeks through.