大した話ではないけど、地味に悩んだし今後も遭遇しそうなので備忘録として残しておく。

仕様:スクロールしたら「Scroll Down」を非表示

当サイトのトップページには「scroll down↓」という文字列の表示があり、少しでもスクロールしたら消えるようになっている。

pages/index.vue

<template>
  <div class="scroll-down" v-if="isInitPosition">
    scroll down<br>↓
  </div>
</template>

<script>
export default {
  mounted() {
    window.addEventListener('scroll', this.handleScroll);
  },
  
  data() {
    return {
      isInitPosition: true
    }
  },
  
  methods: {
    handleScroll() {
      this.isInitPosition = window.scrollY === 0
    }
  }
}
</script>

<style>
.scroll-down {
  position: absolute;
  text-align: center;
  width: 100%;
  bottom: 2.0rem;
}
</style>

問題:Safariでカスが残る

スクロールして表示/非表示が切り替わるかを確認してみると、Chromeでの動作は問題無かったがSafariで開くとカスのようなものが残ってしまう。

ゴミが残る問題

同じSafariでもウィンドウのサイズによって再現したりしなかったり。

v-ifで書いてたものをv-showに変えてみたりしたけど変わらなかった。

対処:要素にpaddingを追加

developer toolsを使って要素を選択してみる。

devtoolで要素を選択

よーく見てみると「l」と「d」の上部がはみ出ている。

試しにpaddingを追加してみると、無事解決した。

<style>
.scroll-down {
  position: absolute;
  text-align: center;
  width: 100%;
  bottom: 2.0rem;
  padding-top: 20px; // この行を追加
}
</style>

そういえば最近フォントを変えたので、おそらくその時からだと思う。

ただ、はっきりとした原因はよく分からない。

試しにheight: 5px;にして大きくはみ出るようにしても、はみ出た分だけ表示されるわけでもなく、同じようにカスだけ表示された。

とりあえずv-ifやらv-show使う時は子要素がはみ出ないようにした方が良さげ。