角度材质工具栏颜色扭曲

Question

可以在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上发生。

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

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

<强> JS

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

codepen example