Javascript 角度材质工具栏颜色扭曲 可以在以下位置找到说明此问题的代码笔：

我遇到了一个关于工具栏扭曲颜色的角度材质问题。沿着边缘（有内容），工具栏是绿色的一个阴影，而在中间（没有内容），工具栏是一个不同的绿色阴影。见下图：

产生这种情况的代码如下所示

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

Web应用程序的名称
测试1
测试2

现在，我的问题是，是否有人知道如何解决这个问题

编辑：

当我点击按钮时。单击按钮时，颜色失真消失。未单击按钮时，颜色失真会返回

编辑：

重要的是要注意。。。我没有。这个问题只存在于我的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>

Web应用程序的名称
你好

没有一个元素是扭曲区域。

既有失真的颜色，也有未失真的颜色

最终编辑：

我已经解决了这个问题。它仅在使用选项卡时出现在Chrome上。

这将对您有所帮助

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>

JS

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

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

这将对您有所帮助

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>

JS

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

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

---

如果您使用的是安装了Sierra的Mac电脑，则可能是该版本操作系统上运行的Chrome存在缺陷

几天前也有类似的问题。我团队中的一个家伙在浏览我们在他的Sierra Macbook上运行的Chrome开发的网站时会看到类似的工件，而我们中其他没有升级或没有使用macOS的人没有这个问题

---

作为记录，我无法在我的Windows机器或El Capitan Macbook上复制您的问题。

如果您在安装了Sierra的Mac上，这可能是该版本操作系统上运行的Chrome的错误

几天前也有类似的问题。我团队中的一个家伙在浏览我们在他的Sierra Macbook上运行的Chrome开发的网站时会看到类似的工件，而我们中其他没有升级或没有使用macOS的人没有这个问题

---

作为记录，我无法在我的Windows机器或El Capitan Macbook上复制您的问题。

我同意您的代码笔示例有效，因此+1。但这并不能解决我的问题。如果你能添加CSS和JS代码段，这将有助于解决这个问题。我同意你的CodePen示例有效，所以+1。但这并不能解决我的问题。如果你能添加CSS和JS代码段，这将有助于解决这个问题。我不能复制你的问题-。当您检查颜色失真的区域时，控制台会显示什么？仍然无法用您的编辑复制它-。你使用的是什么浏览器和平台？@camden_kid是的，我正在开发一个代码笔来复制它。我会让你知道我是否可以创建一个。我怀疑

上有一些CSS，你可能想检查一下。@camden\u孩子不，我也这么认为。但是如果我去掉跨度，所有元素右边的颜色都会扭曲，就像现在中间的颜色一样。我无法复制你的问题-。当您检查颜色失真的区域时，控制台会显示什么？仍然无法用您的编辑复制它-。你使用的是什么浏览器和平台？@camden_kid是的，我正在开发一个代码笔来复制它。我会让你知道我是否可以创建一个。我怀疑

上有一些CSS，你可能想检查一下。@camden\u孩子不，我也这么认为。但是如果我去掉跨度，所有元素右边的颜色都被扭曲了，就像它现在在中心被扭曲一样。