Onsen UIのfabの中のアイコンがずれる。

onsen UIでアプリをデザインしています。サンプルを見ていただけばわかるように、

通常ならば下記のコードではfabの中央にアイコンが表示されます。

onsenUI
1<ons-fab position="bottom right">
2    <ons-icon icon="md-plus"></ons-icon>
3  </ons-fab>

html
1<!DOCTYPE HTML>
2<html>
3<head>
4  <meta charset="utf-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
6  <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
7  <script src="components/loader.js"></script>
8  <script src="lib/onsenui/js/onsenui.min.js"></script>
9
10  <link rel="stylesheet" href="components/loader.css">
11  <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
12  <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
13  <link rel="stylesheet" href="css/style.css">
14
15  <script>
16    ons.ready(function() {
17      console.log("Onsen UI is ready!");
18    });
19
20    window.fn = {};
21    window.fn.open = function() {
22      var menu = document.getElementById('menu');
23      menu.open();
24    };
25    window.fn.load = function(page) {
26      var content = document.getElementById('content');
27      var menu = document.getElementById('menu');
28      content
29        .load(page)
30        .then(menu.close.bind(menu));
31    };
32
33    if (ons.platform.isIPhoneX()) {
34      document.documentElement.setAttribute('onsflag-iphonex-portrait', '');
35      document.documentElement.setAttribute('onsflag-iphonex-landscape', '');
36    }
37  </script>
38</head>
39<body>
40  <ons-splitter>
41    <ons-splitter-side id="menu" side="left" width="220px" collapse swipeable>
42      <ons-page>
43        <ons-list>
44          <ons-list-item onclick="fn.load('home.html')" tappable>
45            Home
46          </ons-list-item>
47          <ons-list-item onclick="fn.load('settings.html')" tappable>
48            Settings
49          </ons-list-item>
50          <ons-list-item onclick="fn.load('about.html')" tappable>
51            About
52          </ons-list-item>
53        </ons-list>
54      </ons-page>
55    </ons-splitter-side>
56    <ons-splitter-content id="content" page="home.html"></ons-splitter-content>
57  </ons-splitter>
58
59  <ons-template id="home.html">
60    <ons-page>
61      <ons-toolbar>
62        <div class="left">
63          <ons-toolbar-button onclick="fn.open()">
64            <ons-icon icon="ion-navicon, material:md-menu"></ons-icon>
65          </ons-toolbar-button>
66        </div>
67        <div class="center">
68          Main
69        </div>
70      </ons-toolbar>
71      <p style="text-align: center; opacity: 0.6; padding-top: 20px;">
72        Swipe right to open the menu!
73      </p>
74      <ons-page>
75  <ons-toolbar>
76    <div class="center">Floating action button</div>
77  </ons-toolbar>
78
79  <ons-fab position="bottom right">
80    <ons-icon icon="md-plus"></ons-icon>
81  </ons-fab>
82</ons-page>
83    </ons-page>
84  </ons-template>
85
86  <ons-template id="settings.html">
87  <ons-page>
88    <ons-toolbar>
89      <div class="left">
90        <ons-toolbar-button onclick="fn.open()">
91          <ons-icon icon="ion-navicon, material:md-menu"></ons-icon>
92        </ons-toolbar-button>
93      </div>
94      <div class="center">
95        Settings
96      </div>
97    </ons-toolbar>
98  </ons-page>
99  </ons-template>
100
101  <ons-template id="about.html">
102  <ons-page>
103    <ons-toolbar>
104      <div class="left">
105        <ons-toolbar-button onclick="fn.open()">
106          <ons-icon icon="ion-navicon, material:md-menu"></ons-icon>
107        </ons-toolbar-button>
108      </div>
109      <div class="center">
110        About
111      </div>
112    </ons-toolbar>
113  </ons-page>
114  </ons-template>
115
116</body>
117</html>
118

しかし、実機(HUAWEI P20Lite)では、fabの上寄りの位置にアイコンが表示されます。

解決策と理由を教えてもらえませんか。

mistn

2019/12/14 09:22 編集

回答依頼をもらったのはありがたいですが手元の端末(Xperia XZs)では状況が再現できないので回答は難しそうです。表示がうまくいっていないのなら原因はCSSにありそうだなぁとは思います。CSSを適用してみたら何か変わるかもしれません。ただ、画像を見る限りアイコン以外も上寄りになっているのでその端末ではその表示が仕様という可能性もあります。