CODEWITHSUNDEEP
javascripthtmlangularjsangular-material
Anthony Dito
Anthony Dito

Reputation: 3680

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:

Toolbar that is miscolored

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.

enter image description here

Final Edit:

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

Upvotes: 1

Views: 599

Answers (2)

Dimitris Karagiannis
Dimitris Karagiannis

Reputation: 9386

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.

Upvotes: 4

tharanga-dinesh
tharanga-dinesh

Reputation: 567

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

Upvotes: 2

Related Questions