safariでのtransformを有効にさせたい

質問

webデザインについてです。

BODY
<div id="wrap">
<main>
<h1>
<ruby>
<span>題</span><rt>dai</rt>名<rt>mei</rt>
</h1>
<hr>
<nav>
#page2_INFO#
#page4_MAIN#
#blog1_LOG#
</nav>
</main>
</div>

CSS
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
*:before,*:after {
position: absolute;
content: "";
}
body {
text-align: center;
font-family: 'Lora','IPA 明朝';
font-size: 15px;
letter-spacing: 1.5px;
margin: 0 auto;
animation: fadeIn 2s ease 0s 1 normal;
-webkit-animation: fadeIn 2s ease 0s 1 normal;
}
@keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}
@-webkit-keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}
#wrap:after {
background: url(画像url) right center;
z-index: -9999;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: auto;
min-height:100vh;
background-size: cover;
}
h1{
font-size: 60px;
font-weight: normal;
line-height: 1;
letter-spacing: 4px;
font-family: 'Lora','IPA 明朝';
text-align: center;
margin: 0 auto;
}
h1 span {
display: block;
padding-top: 8px;
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-webkit-transform: -webkit-translateY (180px);
-webkit-backface-visibility: visible;
backface-visibility: visible;
}
ruby rt {
font-size: 8px;
letter-spacing: 8px;
line-height: 1;
text-align: center;
}
nav{
text-align: center;
}
nav a{
font-size: 20px;
font-family: Cinzel;
line-height: 2;
color: #000;
text-align: center;
background: url(画像url);
background-size: 300px;
padding: 2px;
margin: 0 5px;
}
a{
background: rgba(255,255,255,0.5);
color: #000;
font-size: 10px;
line-height: 14px;
text-decoration: none;
}
main {
background: rgba(255,255,255,0.9);
padding: 5%;
margin: 100px 0;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
main hr{
width: 70%;
border: 0;
height: 1px;
background: #333;
background-image: -webkit-linear-gradient(left, #ccc, #333, #ccc);
background-image: -o-linear-gradient(left, #ccc, #333, #ccc);
margin-top: 10px;
}

（サイトタイトルや画像url等を一部ぼかしています。web fontのコードは省略しています。）
この状態で、chromeやfirefoxから閲覧すると、題名の題という文字がY軸180度回転(鏡文字のような状態)になっているのですが、なぜかsafariから確認すると題という文字がすっぽりと消えてしまいます。ルビ部分はそのまま消えていません。
safariからでも題の文字の部分が鏡文字のように見える状態で閲覧するにはどうしたら良いでしょうか。
よろしくお願い致します。

回答No.1

Proof4 · ベストアンサー

原因は解明できていませんがとりあえず対処法です。
- #wrap::afterのz-indexを0に
- mainにposition: relativeおよびz-index: 100を指定
以上の変更を加えることで正しく表示されました。
なお、検証環境はmacOS Mojave 10.14.2、Safari12.0.2です。

質問の内容からはそれますが、rubyタグの閉じタグがなかったので修正しておくとよいでしょう。

お礼

ご回答ありがとうございます。
自分で調べても解決方法が見つからず、とても困っていたので大変助かりました。
rubyタグのご指摘もありがとうございます。修正しました。