角度材质工具栏颜色扭曲

Posted 2023-03-05

【中文标题】角度材质工具栏颜色扭曲

【英文标题】：Angular Material Toolbar Color Distorted

【发布时间】：2017-02-15 21:45:21

【问题描述】：

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

【问题讨论】：

我无法复制您的问题 - codepen.io/camden-kid/pen/yajbZR。当您检查颜色失真的区域时，控制台会显示什么？

仍然无法通过您的编辑复制它 - codepen.io/camden-kid/pen/yajvXG?editors=1010#0。您使用的是什么浏览器和平台？

@camden_kid 是的，我正在使用 CodePen 尝试复制它。如果我可以创建一个，我会告诉你的。

我怀疑 <span flex></span> 上有一些 CSS，您可能想检查一下。

@camden_kid 不，我也这么认为。但是如果我取出跨度，颜色会在所有元素的右侧扭曲，就像现在在中心扭曲一样。

【参考方案1】：

这会对你有所帮助。

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

【讨论】：

我同意您的 CodePen 示例有效，所以 +1。但这并不能解决我的问题。

如果可以添加CSS和JS代码段，将有助于解决这个问题。

【参考方案2】：

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

几天前遇到了类似的问题。当我团队中的一个人在他的 Sierra Macbook 上查看我们从 Chrome 开发的网站时，他会看到类似的工件，而我们其他没有升级或没有使用 macOS 的人则没有这个问题。

郑重声明，我无法在我的 Windows 机器或 El Capitan Macbook 上复制您的问题。