角度CSS不能正確加載

Question

我有一個圖像作爲背景的ons-page加載。在應用第一次啓動時，會彈出一個ons-dialog並詢問用戶一些信息。當它彈出時，它似乎是背景CSS背後的頁面，每次都無法正確加載。

有時候背景圖像（可見，因爲ons對話框不是全屏）加載正確。其他時候，它會以全尺寸加載圖像，並且不會根據我的css重新調整大小。

我對ONS-頁面的CSS（彈出後）：

.details-content{ 
    background-image: url('images/bg_beer.png'); 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    background-position: center; 
    background-size: cover; 
} 

代碼顯示我的對話：爲何我的CSS是不是一直在做負載

ons.ready(function() { $scope.show('welcomePopup.html'); }); 

任何幫助當ons.ready（）被解僱時，修復或解決方法將非常值得讚賞。

編輯1：

角控制器：

app.controller('homeCon', function($http, $scope, $compile, $sce, $window, filterFilter, $timeout){ 

      document.addEventListener("show", function(event){ 
             if (event.target.id == "myMainPage") { 

             $scope.show('welcomePopup.html'); 
             } 
             },false); 
... 
... 
}; 

HTML我打開頁面：

.details-content{ 
    background-image: url('images/bg_beer.png'); 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    background-position: center; 
    background-size: cover; } 
    </style> 

<ons-page class="transparent" ng-controller="homeCon" id="myMainPage"> <ons-toolbar modifier="transparent"> 
    <div class="right"> 
     <ons-toolbar-button><ons-icon icon="ion-ios-location" style="color: white; font-size: 28px;"></ons-icon></ons-toolbar-button> 
    </div> 
    <div class="left"> 
     <ons-toolbar-button ng-click="menu.toggle()"><ons-icon icon="fa-bars" style="color: white; font-size: 28px;" fixed-width="false"></ons-icon></ons-toolbar-button> 
    </div> </ons-toolbar> <div> <div class="details-content glass"> 
     <div class="welcome" style="top:30%"> 
     <img src="images/bm_logo.png" width="66%"> 
     </br> 
     <div ng-view> 
      <ons-button modifier="quiet" style="color:white" ng-click="openFB()"><i class="fa fa-facebook-square fa-3x"></i></ons-button> 
      <ons-button modifier="quiet" style="color:white" ng-click="openInsta()"><i class="fa fa-instagram fa-3x"></i></ons-button> 
      <ons-button modifier="quiet" style="color:white" ng-click="openTwitter()"><i class="fa fa-twitter-square fa-3x"></i></ons-button> 
     </div> 
    </div> </div> <div> 

</ons-page> 

Answer 1

我不清楚，爲什麼CSS是遇事要是一致的。這可能是精靈如何被渲染，或附加到DOM和繪製精靈的時機問題。試試這個，看看會發生什麼，我很好奇（JS沒有棱角 - 對不起）：

document.addEventListener("init", function(event){ 
    if (event.target.id == "myMainPage") { 
     $scope.show('welcomePopup.html'); 
     } 
},false); 

基本上，這將不火，直到頁面加載和連接，所以希望在CSS是決賽，然後在彈出去。