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

问题描述

说明此问题的代码笔可在

代码产生这个如下。

 < md-toolbar> 
< div class =md-toolbar-tools> 
< h2>< span> Web应用程式的名称< / 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-toolsstyle =background-color：green;> 
< h2 style =background-color：red>< span> Web应用程式的名称< / span>< / h2> 
< / div> 
< / md-toolbar> 
< md-tabs> 
< md-tab>你好< / md-tab> 
< md-tabs> 
  

没有一个元素是扭曲的区域。 < div> 同时具有扭曲的颜色和未失真的颜色。 $ b

最终编辑：

我已经计算出问题。它只在使用选项卡时出现在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屋！