Vue利用時におけるモーダルの実装に時に遭遇した奇妙な現象について

不可解な現象に遭遇したので、
もしご存知のかたがいらしたら教えていただけると幸いです。

まず経緯としては、
Vue.jsを用いて、モーダルの実装のテストをしようと単一ファイルでテストしていました。

(vue.min.js、babel.min.js、polyfill.min.jsをダウンロードしてスタンドアローン、バージョンはコード内に記載しています。)

そこで、
モーダルでよくあるグレーのスクリーンとモーダルウィンドウ用の要素を配置して、
あとはスクロール周りを。。。と思っていたところ、

「もう既に、縦スクロールしないんです。」

まるで、
bodyに「overflow: hidden」がかかっているかのように。

しかもちゃんと、
「モーダルが開いている間」だけ。。。

なんにもしていないんです。
やだなぁ怖いなぁと思い今回こちらでご相談させていただくに至りました。

繰り返しとなりますが、
もしこの現象がわかる方がいらしたらお教えいただけると助かります。

vue
1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8">
5    <title>menta-1yo5105 - modal test</title>
6  </head>
7  <body>
8    <main id="app">
9      <!--  -->
10      <h1>Vue Modal TEST</h1>
11      <section
12        class="Container redBg"
13        @click="initModal('RED')"
14      >
15        <h2>Red Section</h2>
16        <p>Click here to open modal</p>
17      </section>
18      <section
19        class="Container blueBg"
20        @click="initModal('BLUE')"
21      >
22        <h2>Blue Section</h2>
23        <p>Click here to open modal</p>
24      </section>
25      <section
26        class="Container greenBg"
27        @click="initModal('GREEN')"
28      >
29        <h2>Green Section</h2>
30        <p>Click here to open modal</p>
31      </section>
32      <section
33        class="Container orangeBg"
34        @click="initModal('ORANGE')"
35      >
36        <h2>Orange Section</h2>
37        <p>Click here to open modal</p>
38      </section>
39      <section
40        class="Container purpleBg"
41        @click="initModal('PURPLE')"
42      >
43        <h2>Purple Section</h2>
44        <p>Click here to open modal</p>
45      </section>
46
47      <div
48        class="modalScreen"
49        :class="{
50          showModal: isShowModal
51        }"
52      >
53        <div class="modalFrame">
54          <div
55            class="closer"
56            @click="closeModal"
57          >
58            <img
59　　　　　　　　 src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+Cjxzdmcgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDQ4IDQ4IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zOnNlcmlmPSJodHRwOi8vd3d3LnNlcmlmLmNvbS8iIHN0eWxlPSJmaWxsLXJ1bGU6ZXZlbm9kZDtjbGlwLXJ1bGU6ZXZlbm9kZDtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MS41OyI+CiAgICA8ZyB0cmFuc2Zvcm09Im1hdHJpeCgxLjUwNzEzLDAsMCwxLjUwNzEzLC0xOS40NzY1LC0xOC4yNTUxKSI+CiAgICAgICAgPGNpcmNsZSBjeD0iMjguODQ3IiBjeT0iMjguMDM3IiByPSIxNS4yNjEiIHN0eWxlPSJmaWxsOnJnYigxMjEsMTIxLDEyMSk7c3Ryb2tlOndoaXRlO3N0cm9rZS13aWR0aDowLjY2cHg7Ii8+CiAgICA8L2c+CiAgICA8ZyB0cmFuc2Zvcm09Im1hdHJpeCgwLjU0NjA4OCwwLjU0NjA4OCwtMi44MDc4MywyLjgwNzgzLC01LjI5NCwyNy43NjgxKSI+CiAgICAgICAgPHBhdGggZD0iTTQzLjM2MywtNS44ODdDNDMuMzYzLC02LjE2NSA0Mi4yMDMsLTYuMzkxIDQwLjc3NSwtNi4zOTFMNS45NjgsLTYuMzkxQzQuNTQsLTYuMzkxIDMuMzgsLTYuMTY1IDMuMzgsLTUuODg3QzMuMzgsLTUuNjEgNC41NCwtNS4zODQgNS45NjgsLTUuMzg0TDQwLjc3NSwtNS4zODRDNDIuMjAzLC01LjM4NCA0My4zNjMsLTUuNjEgNDMuMzYzLC01Ljg4N1oiIHN0eWxlPSJmaWxsOndoaXRlOyIvPgogICAgPC9nPgogICAgPGcgdHJhbnNmb3JtPSJtYXRyaXgoMC41NDYwODgsLTAuNTQ2MDg4LDIuODA3ODMsMi44MDc4MywyNy43NjgxLDUzLjI5NCkiPgogICAgICAgIDxwYXRoIGQ9Ik00My4zNjMsLTUuODg3QzQzLjM2MywtNi4xNjUgNDIuMjAzLC02LjM5MSA0MC43NzUsLTYuMzkxTDUuOTY4LC02LjM5MUM0LjU0LC02LjM5MSAzLjM4LC02LjE2NSAzLjM4LC01Ljg4N0MzLjM4LC01LjYxIDQuNTQsLTUuMzg0IDUuOTY4LC01LjM4NEw0MC43NzUsLTUuMzg0QzQyLjIwMywtNS4zODQgNDMuMzYzLC01LjYxIDQzLjM2MywtNS44ODdaIiBzdHlsZT0iZmlsbDp3aGl0ZTsiLz4KICAgIDwvZz4KPC9zdmc+Cg=="
60              alt=""
61            >
62          </div>
63          <div class="modalContainer">
64            <h2>{{ sectionColor }}'s Modal</h2>
65            <div>
66              <p>Some messages.</p>
67            </div>
68            <div class="btnGroup">
69              <button
70                class="btn"
71                @click="closeModal"
72              >
73                CLOSE
74              </button>
75            </div>
76          </div>
77        </div>
78      </div>
79      <!--  -->
80    </main>
81  </body>
82</html>
83<script type="text/babel" data-presets="es2015,es2016,es2017">
84new Vue({
85  el: "#app",
86  data () {
87    return {
88      isShowModal: false,
89      sectionColor: null
90    }
91  },
92  created () {
93  },
94  mounted () {
95  },
96  watch: {
97  },
98  methods: {
99    initModal (str) {
100      this.sectionColor = str
101      console.log('called func initModal')
102      this.openModal()
103    },
104    openModal () {
105      console.log('called func openModal')
106      this.isShowModal = true
107    },
108    closeModal () {
109      console.log('called func closeModal')
110      this.isShowModal = false
111    }
112  }
113})
114</script>
115<style scoped>
116
117html {
118  width: 100%;
119  height: 100%;
120  overflow-x: hidden;
121}
122
123body {
124  width: 100%;
125  height: 100%;
126  overflow-x: hidden;
127}
128
129#app {
130  display: block;
131  width: 100%;
132  height: 100%;
133  padding-left: 20px;
134  padding-right: 20px;
135  overflow-x: hidden;
136}
137
138.Container {
139  display: block;
140  height: 300px;
141  width: calc(100vw - 100px);
142  margin-bottom: 50px;
143  padding: 20px;
144  box-shadow: 0px 11px 35px 0px rgba(0,0,0,0.15);
145  border-radius: 5px;
146}
147
148h2 {
149  border-left: 4px solid #444;
150  color: #444;
151  padding-left: 8px;
152  font-size: 20px;
153  line-height: 50px;
154}
155
156.redBg {
157  background: rgba(200, 50,21,.5);
158}
159
160.blueBg {
161  background: rgba(20, 150,210,.5);
162}
163
164.greenBg {
165  background: rgba(20, 150,10,.5);
166}
167
168.orangeBg {
169  background: rgba(250, 135, 7,.8);
170}
171.purpleBg {
172  background: rgba(200, 50, 210,.5);
173}
174
175.modalScreen {
176  display: none;
177  position: fixed;
178  top: 0;
179  left: 0;
180  width: 100vw;
181  height: 100vh;
182  background: rgba(100, 100, 100, .5);
183  z-index: 999;
184  backdrop-filter: blur(3px);
185}
186
187.modalFrame {
188  position: fixed;
189  top:0;
190  left: 0;
191  right: 0;
192  bottom: 0;
193  margin: auto;
194  width: 500px;
195  height: 217px;
196  background: #fff;
197  border-radius: 5px;
198  z-index: 10;
199  box-shadow: 0px 11px 35px 0px rgba(0,0,0,0.4);
200}
201
202.modalContainer {
203  padding: 20px;
204}
205
206.closer {
207  position: absolute;
208  width: 40px;
209  height: 40px;
210  top: -19px;
211  right: -19px;
212  cursor: pointer;
213  border-radius: 50%;
214  box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.4);
215}
216
217.showModal {
218  display: block;
219}
220
221.btn {
222 display: inline-block;
223 background: none;
224 color: #000;
225 width: 100px;
226 height: 40px;
227 box-shadow: 0px 4px 9px 0px rgba(0,0,0,0.3);
228 margin-top: 10px;
229 margin-right: 10px;
230 font-weight: 200;
231 transition-property: box-shadow, background;transition-duration: 0.2s;transition-delay: 0;
232 outline: none;
233 border-radius: 3px;
234 border: none;
235 font-size: 12px;
236 letter-spacing: 4px;
237 font-weight: bold;
238}
239
240.btn:hover {
241  background: rgba(24, 140,140,.2);
242  box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.4);
243}
244
245.btnGroup {
246  width: 100%;
247  height: 0 auto;
248  display: flex;
249  flex-wrap: wrap;
250  justify-content: flex-end;
251}
252
253
254</style scoped>
255<script src="https://cdn.jsdelivr.net/npm/babel-standalone@6.26.0/babel.min.js" integrity="sha256-FiZMk1zgTeujzf/+vomWZGZ9r00+xnGvOgXoj0Jo1jA=" crossorigin="anonymous"></script>
256<script src="https://cdn.jsdelivr.net/npm/babel-polyfill@6.26.0/dist/polyfill.min.js" integrity="sha256-WRc/eG3R84AverJv0zmqxAmdwQxstUpqkiE+avJ3WSo=" crossorigin="anonymous"></script>
257<script src="https://cdn.jsdelivr.net/npm/vue@2.6.7/dist/vue.min.js" integrity="sha256-wjeNXh/Gd38adX82/m9I1JR9pAOIBo7rK0Rxogq4FQg=" crossorigin="anonymous"></script>
258