monaca上で地図ライブラリLeaflet.jsがうまく表示されない

monacaと地図ライブラリleaflet.jsでアプリ作成を試みています。
地図は表示されるのですが、Zoomボタン、地図切替ボタン、著作権表示などが地図の後ろ側に隠れて表示されません。
地図を指で移動させている瞬間だけ、Zoomボタンなどが表示される状況です。
※症状説明用の参考動画 https://youtu.be/DFHPMMHmVPA

■発生環境
**開発環境：**MonacaクラウドIDE
**端末：**iPhone12Pro（iOS14.7.1）
**プロジェクト：**Onsen UI V2 JS Minimum
※下記のサンプルスクリプトではAndroidでは地図は問題なく表示されます。
然しながら、onsenuiのページtemplateを沢山書いていくと、Androidでも同様の症状が発生しています。

■コード
すぐに症状をご確認いただけるようにleaflet.jsはCDNにしています。

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  <!-- Leaflet -->
16  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
17  <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
18
19  <script>
20    ons.ready(function() {
21		console.log("Onsen UI is ready!");
22
23		document.addEventListener('show', function(event) {
24			page = event.target;
25
26			if (page.id === 'record') {
27
28				// [記録する]タブを複数回タップすると、Mapオブジェクトが再初期化されて
29				// "Map container is already initialized."エラーが出ますが、
30				// 質問のコードを簡素化するために、エラー処理は施しておりません。
31				var map = L.map('map',{zoomControl:false});
32
33				map.setView([35.40, 136], 5);
34				L.control.scale({maxWidth:200,position:'bottomright',imperial:false}).addTo(map);
35				L.control.zoom({position:'bottomleft'}).addTo(map);
36				//地理院地図の標準地図タイル
37				var gsi =L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', 
38					{attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>"});
39				//地理院地図の淡色地図タイル
40				var gsipale = L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png',
41					{attribution: "<a href='http://portal.cyberjapan.jp/help/termsofuse.html' target='_blank'>地理院タイル</a>"});
42				//オープンストリートマップのタイル
43				var osm = L.tileLayer('http://tile.openstreetmap.jp/{z}/{x}/{y}.png',
44					{  attribution: "<a href='http://osm.org/copyright' target='_blank'>OpenStreetMap</a> contributors" });
45				//baseMapsオブジェクトのプロパティに3つのタイルを設定
46				var baseMaps = {
47					"地理院地図" : gsi,
48					"淡色地図" : gsipale,
49					"オープンストリートマップ"  : osm
50				};
51				//layersコントロールにbaseMapsオブジェクトを設定して地図に追加
52				//コントロール内にプロパティ名が表示される
53				L.control.layers(baseMaps).addTo(map);
54				gsi.addTo(map);
55
56			}
57	    });
58
59
60    });
61
62    if (ons.platform.isIPhoneX()) {
63      document.documentElement.setAttribute('onsflag-iphonex-portrait', '');
64      document.documentElement.setAttribute('onsflag-iphonex-landscape', '');
65    }
66  </script>
67</head>
68<body>
69
70<!-- ★ナビゲーター -->
71<ons-navigator id="myNav" page="bottom-tabbar.html" swipeable></ons-navigator>
72
73<!-- ★タブバー -->
74<template id="bottom-tabbar.html"> 
75<ons-page id="bottom-tabbar">
76	<ons-tabbar position="bottom" id="bottom-tabbar">
77		<ons-tab page="test.html" label="ホーム" icon="fa-home" active="true"></ons-tab>
78		<ons-tab page="record.html" label="記録する" icon="fa-camera-retro"></ons-tab>
79	</ons-tabbar>
80</ons-page>
81</template>
82
83	<!-- ★Test Page -->
84	<template id="test.html"> 
85	<ons-page>
86		<p style="padding: 200px 30px; font-size:40pt;">TEST</p>
87	</ons-page>
88	</template>
89
90
91<!-- ■記録（症状が発生しているページ） *******************************************************************************-->
92<template id="record.html">
93  <ons-page id="record">
94
95	<ons-toolbar>
96		<div class="center">記録する</div>
97	</ons-toolbar>
98
99	<div class="pankuzu">
100		<p>記録</p>
101	</div>
102
103	<div class="contents_area">
104
105			<p>誕生日</p>
106			<input type="date" />
107
108			<p>性別</p>
109			<label class="radio-button radio-button--material">
110				<input type="radio" class="radio-button__input radio-button--material__input">
111				<div class="radio-button__checkmark radio-button--material__checkmark"></div>
112				男性
113			</label>
114			<label class="radio-button radio-button--material">
115				<input type="radio" class="radio-button__input radio-button--material__input">
116				<div class="radio-button__checkmark radio-button--material__checkmark"></div>
117				女性
118			</label>
119
120			<p>写真</p>
121			<div>
122				<ons-row>
123					<ons-col width="33%">
124						写真選択<input type="file" />
125					</ons-col>
126					<ons-col width="33%">
127						写真選択<input type="file" />
128					</ons-col>
129					<ons-col width="34%">
130						写真選択<input type="file" />
131					</ons-col>
132				</ons-row>
133			</div>
134
135			<p>地図</p>
136			<div id="map" style="border:1px solid #999; height:150px;"></div>
137
138			<div>
139				<ons-button ripple>登録する</ons-button>
140				<p><ons-button class="button">キャンセル</ons-button></p>
141				<p><ons-button class="button">履歴を削除する</ons-button></p>
142			</div>
143
144	</div>	
145  </ons-page>
146</template>
147
148</body>
149</html>

■症状
冒頭の通りですが、

地図は表示されるが、Zoomボタン、地図切替ボタン、著作権表示などが地図の後ろ側に隠れて表示されない
地図を指で移動させている瞬間だけ、Zoomボタンなどが表示される状況です。
サンプルコードにおいてはiPhoneのみで発生。Androidでは発生せず。
然しながら、templateを増やしていくとAndroidでも発生しました。
ラジオボタン（性別）をタップした瞬間だけ、Zoomボタンなどが表示されます
見て頂いたほうが症状が分かりやすいと思い、動画を上げました。

https://youtu.be/DFHPMMHmVPA

■試したこと