角度CSS未正确加载

Question

我有一个以图像为背景的页面加载。在应用程序第一次启动时，会弹出一个 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;
}

显示我的对话框的代码：

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

任何关于为什么我的 css 在 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 不是 Angular - 抱歉）：

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

基本上，在页面加载并附加之前，它不会触发，所以希望 CSS 是最终的，然后弹出窗口就会消失。