角度材质工具栏颜色失真 [英] Angular Material Toolbar Color Distorted

问题描述

可以在

产生这个的代码如下.

<div class="md-toolbar-tools"><h2><span>Web 应用程序的名称</span></h2><span flex></span><md-button>Test1</md-button><md-button>Test2</md-button>

</md-工具栏>

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

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

重要的是要注意...我没有.这个问题只存在于 Chrome 上.在 Safari 上，它运行良好.

这是另一张可能有助于确定问题的图片和代码.

<div class="md-toolbar-tools" style="background-color: green;"><h2 style="background-color: red"><span>Web 应用程序的名称</span></h2>

</md-工具栏><md-tabs><md-tab>你好</md-tab><md-tabs>

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

既有扭曲的颜色，也有未扭曲的颜色.

最终

我已经找到了问题所在.只有在 Chrome 上使用标签时才会出现这种情况.

解决方案

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

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

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

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:

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.

Final Edit:

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

解决方案

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.

这篇关于角度材质工具栏颜色失真的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！