角度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是决赛，然后在弹出去。