Angular Material Toolbar Color Distorted

问题

A Code pen that illustrates this problem can be found at http://cdpn.io/VKxEaZ

I have been experiencing an issue with Angular Material in regards to the toolbar having distorted colors. Along the edges (where there is content) the toolbar is one shade of green while in the middle (where there is no content) the toolbar is a different shade of green. See the picture below:

The code that produced this is as below.

<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>

Now, my question is if anyone knows how to resolve this issue?

EDIT:

When I click the buttons. The color distortion goes away while the button is being clicked. When the button is not being clicked, the color distortion returns.

EDIT:

Important to note... That I didn't. This problem only exists for me on Chrome. On Safari, it works fine.

EDIT:

Here is another picture and code that may be useful in determining the problem.

<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>

There is no one element that is the distorted area. The <div> has both the distorted color and the undistorted color.

Final Edit:

I have figured out the problem. It only occurs on Chrome when using tabs.

回答1:

If you are on a Mac with Sierra installed, it is probably a bug of Chrome running on this version of the OS.

Had a similar problem a few days back. One guy from my team would see similar artifacts when he viewed the website we developed from Chrome running on his Sierra Macbook, while the rest of us who either had not upgraded or did not use macOS did not have this issue.

For the record, I cannot replicate your issue on my Windows machine or El Capitan Macbook.

回答2:

This will help you.

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 example

来源：https://stackoverflow.com/questions/39907983/angular-material-toolbar-color-distorted

标签

javascript

html

angularjs

angular-material