Перспективная проблема мобильного WebKit

Question

3d-вращающийся элемент прорезает другой элемент с более высоким z-индексом независимо от z-индекса Δ или разницы в перспективе Это хорошо работает в Safari, Safari Mobile на iOS 4, но на iOS 5 я вижу проблему

http://jsfiddle.net/voidbrain/cuHn5/7/embedded/result/

Answer 1

"Ленточный" DIV, в который врезается, находится по существу в позиции 0 на оси z.Чтобы он не разрезался другим DIV, вращающимся вдоль оси y, вам нужно отодвинуть «ленточный» DIV обратно по оси z на расстояние, равное, по крайней мере, половине ширины вращающегося DIV.Например, если вращающийся DIV имеет ширину 100 пикселей, тогда примените следующий CSS к «ленточному» DIV:

-webkit-transform: translate3d (0, 0, 50 пикселей)