背景画像が大きいウェブサイトがあります。ここで、背景画像もある円のボタン/リンクを追加したいと考えています。
Chrome と IE では正常にレンダリングされますが、Firefox では と同じ醜いボックスが表示されbackground-colorます<body>。
外側の容器と丸ボタンを組み合わせる とすぐに問題が発生するようです。background-attachment: fixed;border-radius
これは Firefox のバグだと思います。誰にもこれに対する回避策がありますか？
PS: ここで「コード スニペットの実行」を介して実行すると、Firefox で正しくレンダリングされます。何故ですか？！
Chrome/IE (どちらの丸も正しい):
Firefox (ピンク色のボックスにある 2 番目の円background-attachment: fixed;が壊れています):
body {
background-color: gray;
}
#wrapper1 {
width: 100px;
height: 100px;
background-image: url("http://www.edda-hsu.net/images/ProductImages/Fabrics/BasicFabrics/smooth-velvet-magenta.jpg");
margin-bottom: 40px;
}
#wrapper2 {
width: 100px;
height: 100px;
background-image: url("http://www.edda-hsu.net/images/ProductImages/Fabrics/BasicFabrics/smooth-velvet-magenta.jpg");
background-attachment: fixed; /* PROBLEM */
}
.box {
display: block;
background-image: url("https://d2d00szk9na1qq.cloudfront.net/Product/ac6714d6-578e-42d4-b81f-aaf7a7e5d580/Images/Large_CV-174.jpg");
background-attachment: fixed;
border-radius: 50%; /* PROBLEM */
width: 50px;
height: 50px;
}<body>
<div id="wrapper1">
<div class="box"></div>
</div>
<div id="wrapper2">
<div class="box"></div>
</div>
</body>