android(Chrome) 横画面 background 表示されない

Question

前提・実現したいこと

ホームページ作成の際にレスポンシブ化をしていて、backgroundの画像がスマホを横画面にしたときに表示されなくなります
Chromeの開発者ツールではどの端末の縦でも横でも表示されています
githubで公開した場合にiphone(Safari)では横画面にしても表示されました
githubで公開した場合にandroid(Chrome)では横画面にした以降表示されなくなります
追記：githubで公開した場合にandroid(Firefox)では横画面にしても表示されました

該当のソースコード

html{
    overflow-x: hidden;
}

.top-wrapper{
  height: 100vh;
  width: 100%;
}

.top-wrapper-box{
  height: 98%;
  width: 98%;
  margin: 0 1%;
  margin-top:10px;
  border-radius: 30px;
  background: url("../img/unsplash-index-top.jpg");
  background-position: center;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  -ms-background-size: cover;
  background-size:cover;
}

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">

<main>
    <div class="top-wrapper">
      <div class="top-wrapper-box">

      </div>
    </div>
</main>

Comments

[yoshinavi]

CSSのプロパティをベンダープレフィックスの後に書いてみてはどうでしょうか？

[aki_0530]

background-sizeにもうベンダープレフィックスはいらないみたいですね
”CSSのプロパティをベンダープレフィックスの後に書いてみてはどうでしょうか？”
↑よくわからないのでもう少し具体的にお願いしますm(_ _)m

[aki_0530]

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
-ms-background-size: cover;
background-size:cover;
こういうことか　本件は今回の問題とは関係ありませんでした

Answer 1

原因は border-radius でした
background(画像) に border-radius を指定するとChromeのスマホの場合にのみbackgroundが表示されないことがわかりました
この問題は border-radius にベンダープレフィックスを適応させても解決はしませんでした