Искажен цвет панели инструментов Angular Material

#javascript #html #angularjs #angular-material

#javascript #HTML #angularjs #angular-материал

Вопрос:

Перо кода, иллюстрирующее эту проблему, можно найти по адресу http://cdpn.io/VKxEaZ

У меня возникла проблема с Angular Material в связи с искажением цветов на панели инструментов. По краям (там, где есть содержимое) панель инструментов имеет один оттенок зеленого, а в середине (там, где нет содержимого) панель инструментов имеет другой оттенок зеленого. Смотрите рисунок ниже:

Код, который произвел это, как показано ниже.

 <md-toolbar>
    <div class="md-toolbar-tools">
        <h2><span>Name of Web App</span></h2>
        <span flex></span>
        <md-button>Test1</md-button>
        <md-button>Test2</md-button>
     </div>
</md-toolbar>

Теперь мой вопрос в том, знает ли кто-нибудь, как решить эту проблему?

Редактировать:

Когда я нажимаю кнопки. Искажение цвета исчезает при нажатии кнопки. Когда кнопка не нажата, искажение цвета возвращается.

Редактировать:

Важно отметить… Этого я не сделал. Эта проблема существует только для меня в Chrome. В Safari это работает нормально.

Редактировать:

Вот еще одна картинка и код, которые могут быть полезны при определении проблемы.

 <md-toolbar>
    <div class="md-toolbar-tools" style="background-color: green;">
        <h2 style="background-color: red"><span>Name of Web App</span></h2>
     </div>
</md-toolbar>  
<md-tabs>
    <md-tab>Hello</md-tab>
<md-tabs>

Нет ни одного элемента, который является искаженной областью. <div> Имеет как искаженный, так и неискаженный цвет.

Окончательное редактирование:

Я понял проблему. Это происходит только в Chrome при использовании вкладок.

1. Я не могу воспроизвести вашу проблему — codepen.io/camden-kid/pen/yajbZR . Что показывает консоль при проверке области с искажением цвета?

2. По-прежнему не удается воспроизвести его с помощью редактирования — codepen.io/camden-kid/pen/yajvXG?editors=1010#0 . Какой браузер и платформу вы используете?

3. @camden_kid да, я работаю над CodePen, чтобы попытаться его воспроизвести. Я дам вам знать, если смогу его создать.

4. Я подозреваю, что для этого есть некоторый CSS, <span flex></span> который вы, возможно, захотите проверить.

5. @camden_kid нет, я тоже так подумал. Но если я уберу интервал, цвет справа от всех элементов будет искажен так же, как сейчас он искажен в центре.

Ответ №1:

Если вы используете Mac с установленной Sierra, вероятно, это ошибка Chrome, работающего на этой версии ОС.

Несколько дней назад возникла аналогичная проблема. Один парень из моей команды видел похожие артефакты, когда просматривал веб-сайт, который мы разработали из Chrome, работающий на его Macbook Sierra, в то время как у остальных из нас, которые либо не обновляли, либо не использовали macOS, этой проблемы не было.

Для справки, я не могу воспроизвести вашу проблему на своем компьютере с Windows или Macbook El Capitan.

Ответ №2:

Это поможет вам.

HTML

 <div ng-controller="AppCtrl" ng-cloak="" class="toolbardemoBasicUsage" ng-app="MyApp">
  <md-content>
    <br>
    <md-toolbar>
    <div class="md-toolbar-tools" style="background-color:green">
        <h2><span>Name of Web App</span></h2>
        <span flex></span>
        <md-button>Test1</md-button>
        <md-button>Test2</md-button>
     </div>
</md-toolbar>  
  </md-content>
</div>

CSS

 .toolbardemoBasicUsage md-toolbar md-icon.md-default-theme {
  color: white; }

 angular.module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])
    .controller('AppCtrl', function($scope) {
    });

пример codepen