Кроссбраузерное отражение элементов на CSS3

[lifestar]

Firefox 12.0 — по вашей ссылке нету отражения, только свечение

[datacompboy]

Opera 12.00 beta — текст на отражении не перевёрнут

[skaflock]

там просто нужно дописать -o-transform: scaleY(-1);

[Yan_Alex]

То же самое на 12.0, видимо решение НЕ кроссбраузерное.

[skaflock]

FF 12.0: habrastorage.org/storage2/47d/55c/9ba/47d55c9ba1872dd07209de3d3c45a926.jpg
Opera 11.64: habrastorage.org/storage2/ea2/4e2/959/ea24e2959a0964c00ec7cf4a1a6742ee.jpg
Хром 19.0.1084.52 m — всё ок

[pestov]

Я скинул новый пример. Проблема была в .svg

[Radik_Wind]

На мой взгляд вы переборщили с заголовком, судя по комментариям и моим тестам нет тут кросбраузерной поддержки. А так же не плохо бы было добавить в статью информацию о том в каких браузерах и с начиная с каких версий реально все работает.

[vitvad]

Если судить по этим данным:
transform
box-shadow
border-radius
filter

+ фильтры для ИЕ6-8 поддержка должна быть

IE7+, FF3.6+, GC, Safari, Opera
Возможно ошибки в примерах были

[yurik417]

Переименуйте в «Некроссбраузерное отражение элементов на CSS3»

[datacompboy]

«Не кроссбраузерное не всегда отражение не совсем элементов на CSS3»

[illi]

Не подскажете как бороться с такими случаями?

[illi]

habrastorage.org/storage2/a6d/5c3/580/a6d5c358039e59c4d8c7d516d83c09bf.jpg

[putnik]

Собственно, user-select: none; для отражения. Ну, или можете немного поизвращаться, если хотите кроссбраузерность.

[putnik]

Простите за занудство, но хорошо бы отражению выставлять user-select: none.

[pestov]

Я считаю что это не занудство, а вы абсолютно правы, сейчас поменяю.

[CyberAP]

Семантически кривая вёрстка. Для IE используйте отдельные стили, а не элементы. К тому же двойной спан ни к чему, можно обойтись элементом :after и там прописать у него в content: ""; ваше содержимое, тогда и поисковики будут нормально такой текст отображать.