CSS Стили исчезают из вида только с темой ngMaterial на iOS - PullRequest
Новая
       17

CSS Стили исчезают из вида только с темой ngMaterial на iOS

0 голосов
/ 24 апреля 2020

Я использую AngularJS с ngMaterial и использую собственную тему. У меня есть навигационная ссылка, которая возьмет компонент и вставит его в представление. В этом представлении у меня есть элементы управления ngMaterial с использованием пользовательской темы.

Все ниже работает на 100% на настольном компьютере, ноутбуке, MacBook. У меня проблема возникает только на мобильном устройстве или если я установил для macbooks chrome dev tools значение iphone 6/7/8.

Проблема в том, что все фоны любого элемента управления ngMaterial прозрачны. Я приложил два скриншота. Одним из них является то, как он работает на рабочем столе (что правильно). Другой скриншот этого на мобильном телефоне.

Не работает:
Mobile Image

Работает:
enter image description here

Конфигурация пользовательской темы : 

.config(function($mdThemingProvider,$provide) {
  $mdThemingProvider.theme('default')
    .primaryPalette('green', {
      'default': '800', 
      'hue-1': '100', 
      'hue-2': '600', 
      'hue-3': '400' 
    })
    .accentPalette('orange')
    .dark();
 // $mdThemingProvider.setDefaultTheme('default');
 // $mdThemingProvider.generateThemesOnDemand(true);
 // $provide.value('themeProvider',$mdThemingProvider);
})

Функция навигации для добавления компонента в представление: 

            $("#custom-content").append(`<${component} style="height:100%;"></${component}>`);
            angular.element("#custom-content").injector().invoke(function($compile) {
                'ngInject';
                try{
                    let $div = $("#custom-content");
                    let scope = $("body[ng-controller='templateCtrl']").scope();
                    $compile($div)(scope);
                } catch(err) {
                    console.log(err);
                }
            });   
            window.location = `Home.html#custom-screen?page=${title}`

Шаблон компонента: 

<div layout="column" style="position:relative;height:100%;width:100%;overflow: hidden;" ng-cloak>
  <section layout="row" flex>
    <md-sidenav
        class="md-sidenav-left"
        md-component-id="left"
        md-whiteframe="4"
        style="overflow: hidden;display: flex;flex-flow: column nowrap;">
      <md-toolbar style="flex:1;">
        <h1 class="md-toolbar-tools">Cameras</h1>
      </md-toolbar>
      <md-content ng-controller="cameraSidePane" style="overflow: auto;flex:19;">
        <md-list flex>
            <div ng-repeat="location in cameras.data">
                <md-subheader class="md-no-sticky">{{location.name}}</md-subheader>
                <md-divider ></md-divider>
                <div ng-repeat="cam in location.points">
                    <md-list-item ng-click="openCamera(cam.id)">
                      <div class="md-list-item-text" layout="column">
                        <div class="cameraListItem">{{cam.name}}</div>
                      </div>
                    </md-list-item>
                </div>
            </div>
        </md-list>
      </md-content>
    </md-sidenav>

    <md-content style="width:100%;height: 100%;">
        <image id="camera-overview" style="width:100%;height:100%;" src="styles/images/placeholder.jpg"></image>
        <div style="position:absolute;left:20px;top:40px;">
            <md-button class="md-button md-default-theme md-raised md-primary"  ng-click="toggleLeft()">Cameras</md-button>
        </div>
        <md-progress-circular ng-show="loader" class="md-primary" md-diameter="80px" style="position:absolute;left:50%;top:50%;"></md-progress-circular>
    </md-content>
  </section>
</div>
...