Angular Material Toolbar Color Distorted

Question

A code alias illustrating this problem can be found at http://cdpn.io/VKxEaZ

I am having a problem with Angular Material regarding a toolbar with distorted colors. At the edges (where there is content) the toolbar is a single shade of green, and in the middle (where there is no content) the toolbar is a shade of green. See the picture below:

The code created in this way is shown 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: does anyone know how to solve this problem?

EDIT:

When I click the buttons. Color distortion disappears when the button is pressed. When the button is not pressed, color distortion returns.

EDIT:

It is important to note ... I did not do this. This problem exists only for me in Chrome. It works great in Safari.

EDIT:

Here is another picture and code that may be helpful in identifying 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 not a single element that is a distorted area. <div> has both a distorted color and an undistorted color.

Final Edit:

I figured out this problem. This only happens in Chrome when using tabs.

Answer 1

If you are using a Mac with a version of Sierra installed, this is probably a Chrome bug working in this version of the OS.

We had a similar problem a few days ago. One guy from my team will see similar artifacts when he views the website we created from Chrome, which runs on his Sierra MacBook, while the rest of us who either did not update or did not use macOS did not have this Problems.

For recording, I cannot replicate your problem on my Windows computer or on El Capitan's Macbook.

Answer 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; } 

Js

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

codepen example