Manul Tech

ついにCSS3のbackface-visibilityを使う機会が来たので嬉々として実装したら、まさかChromeで動かないとは。動かないというか、裏に設定している要素が表示されない。今回はたまたま解消できたけど、しっかりしろよChrome。


ぐるんぐるん

サンプルなんかでよくあるフリップというよりは、ぐるんぐるん回す感じだった今回は。

<div id="guruguru">
	<div id="gurus">
		<div id="front">
			<img src="http://tech.manulneko.com/wp-content/uploads/sites/2/2014/06/5565975996_451719e9dc_z.jpg" alt="マヌルネコ" width="640" height="427" class="alignnone size-full wp-image-123" />
		</div>
		<div id="back">
			<img src="http://tech.manulneko.com/wp-content/uploads/sites/2/2014/06/5565389437_537ec32098_z.jpg" alt="マヌルネコ" width="640" height="427" class="alignnone size-full wp-image-124" />
		</div>
	</div>
</div>


/* CSS */
<style>

#guruguru{
	cursor: pointer;
	-webkit-perspective: 1000;
	-moz-perspective: 1000;
	-ms-perspective: 1000;
	-o-perspective: 1000;
	perspective: 1000;
}

#guruguru.guru #gurus{
	-webkit-transform: rotateY(900deg);
	-moz-transform: rotateY(900deg);
	-o-transform: rotateY(900deg);
	-ms-transform: rotateY(900deg);
	transform: rotateY(900deg);
}

#gurus{
	-webkit-transition: 1.5s;
	-moz-transition: 1.5s;
	-o-transition: 1.5s;
	-ms-transition: 1.5s;
	transition: 1.5s;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-animation-timing-function: linear;
	-moz-animation-timing-function: linear;
	-o-animation-timing-function: linear;
	-ms-animation-timing-function: linear;
	animation-timing-function: linear;
	position: relative;
	height: 427px;
}

#gurus div{
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
}

#back{
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
	-o-transform: rotateY(180deg);
	-ms-transform: rotateY(180deg);
	transform: rotateY(180deg);
}

#front{
	z-index: 1;
}

</style>

/* JS */
<script>
$('#guruguru').on('click', function(){
	if($(this).hasClass('guru')){
		$(this).removeClass('guru');
	}
	else{
		$(this).addClass('guru');
	}
});
</script>

クリックでグルグル

マヌルネコ
マヌルネコ

photo by mrazek76

IE10でも動いたし、よしよしと思っていたらChoromeではこのサンプルでいうところの正面を向いている方が見えない。
※実際は背景透過pngをぐるぐるした時の事象で、このサンプルはChromeでも動くと思う。

どうすんの、直るの

調べてみると結構出てきたから既知のバグなんだろうとは思うんだけど、中々当たりに出会わない。要素に display: inline-block を指定すればいいとかあったけどダメ。
えー別の演出考えんのかよやだよと思い始めた頃、あちこちにあるフリップサンプルの中でも動くもの(裏が見えるもの)もあることを見つけて。何が違うのかをさらったら、わかった。

背景の有無

そう、背景の有無。backgroundを指定しているかどうか。backgroundを設定していると残念なChromeでも後ろ側が見れるようになる。
ただ、今回の案件では背景は透過にしておきたかったから、いにしえの1x1pxの透明gif(わお)を指定した。ちなみに rgba(0,0,0,0) ではだめだった。

この背景の指定の有無でどうのって、レガシーIEでも何かあった気がする。同様に背景を指定すると見えるようになるみたいなやつが。

もちろん解消法はシチュエーションによってこの限りではないと思うけど、ググっても見つけられなかった不具合を自分で何とか出来たのはラッキーだった。それとも誰もこんな目にはあっていないのか、どうなんだろ。
当たり前といえばそうなのだけれど、モダンブラウザでも意外なところにバグが潜んでたりするもんだね。