モバイルでボタンのテキストが回転しています

Question

私はフローティングトップトップボタンを作成しました。 PC上ではすべてうまくいっていますが、モバイル上ではボタン内のテキストが少し回転して読み込みに時間がかかります。何が原因でしょうか？

<a class="back-to-top btn-floating btn-large waves-effect waves-light green"> 
    <i class="material-icons">↑</i> 
</a> 

をそして、これはCSSです：：

この

は、ボタンは materializecssを使用している

a.back-to-top { 
    display: none; 
    width: 60px; 
    height: 60px; 
    position: fixed; 
    right: 20px; 
    bottom: 20px; 
} 

そして、この関数はトップにスクロールん：

：PC上で

var amountScrolled = 300; 

$(window).scroll(function() { 
    if ($(window).scrollTop() > amountScrolled) { 
     $('a.back-to-top').fadeIn('slow'); 
    } else { 
     $('a.back-to-top').fadeOut('slow'); 
    } 
}); 
$('a.back-to-top').click(function() { 
    $('html, body').animate({ 
     scrollTop: 0 
    }, 700); 
    return false; 
}); 

モバイルで

：

編集：はあなたがあなた自身のthisに見たいだけであればfont-style: italic;かtransform:skew(...)

のデモ

Answer 1

チェックはい、それは<i>要素から継承font-style: italic;です。

あなたは傾斜を抑制するために

i.material-icons { font-style:normal; } 

を置くものとします。