0

このようなテスト用のHTMLファイルを作成します

<html><head>
<style>
.wrapper{
    transform: translate(0,0);
}
.container{
    height: 600px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
}
.container1{
    background-image: url(http://www.fillmurray.com/900/600);
}
.container2{
    background-color: white;
}
</style></head>
<body>
<div class="wrapper">
        <div class="container container1">
        </div>
        <div class="container container2">
        </div>
    </div>
</body>
</html>

このコードを Google Chrome と Firefox でテストします。どちらのブラウザでも正しく動作します。（画像の固定位置の場合）しかし、上記のコードをこのようなイオンに適用します...

<style>
.wrapper{
    transform: translate(0,0);
}
.container{
    height: 600px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
}
.container1{
    background-image: url(http://www.fillmurray.com/900/600);
}
.container2{
    background-color: white;
}
</style>

<ion-view view-title="Home">
    <ion-content overflow-scroll="true">
        <div class="wrapper">
            <div class="container container1">
            </div>
            <div class="container container2">
            </div>
        </div>
    </ion-content>
</ion-view>

2 番目のコードは Firefox では正しく機能しますが、Google Chrome では機能しません (最初のコードのように画像の位置が固定されていません)。助けてくれてありがとう。

4

0 に答える 0