こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

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からでも題の文字の部分が鏡文字のように見える状態で閲覧するにはどうしたら良いでしょうか。
よろしくお願い致します。

投稿日時 - 2019-05-08 17:31:47

QNo.9614739

困ってます

質問者が選んだベストアンサー

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

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

投稿日時 - 2019-05-08 22:32:40

お礼

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

投稿日時 - 2019-05-10 21:52:01

ANo.1

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(1)

あなたにオススメの質問