Я использую AngularJS с ngMaterial и использую собственную тему. У меня есть навигационная ссылка, которая возьмет компонент и вставит его в представление. В этом представлении у меня есть элементы управления ngMaterial с использованием пользовательской темы.
Все ниже работает на 100% на настольном компьютере, ноутбуке, MacBook. У меня проблема возникает только на мобильном устройстве или если я установил для macbooks chrome dev tools значение iphone 6/7/8.
Проблема в том, что все фоны любого элемента управления ngMaterial прозрачны. Я приложил два скриншота. Одним из них является то, как он работает на рабочем столе (что правильно). Другой скриншот этого на мобильном телефоне.
Не работает:
Работает:
Конфигурация пользовательской темы :
.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>