[英]Google Chrome Border Radius issue
Hi there I am working on this site - http://smudgedigital.com/animation-projects/ and have an issue with the gallery on the projects page. 嗨,我在这个网站上工作-http: //smudgedigital.com/animation-projects/,并且在“项目”页面上的画廊有问题。 The images should all be a circle and when rolled over the the image should remain a circle and have a hover black state.
图像都应该是一个圆圈,并且当滚动到图像上时,图像应该保持一个圆圈并具有悬停黑色状态。
However despite the site working fine I have recently noticed that the circles are no longer circles in google chrome. 但是,尽管该网站运行良好,但我最近注意到,这些圈子不再是Google Chrome中的圈子。 The are in fact square on all states.
实际上,所有州都在广场上。
I have looked through this site to find any answers but none of them seem to work. 我浏览了该站点以找到任何答案,但似乎都没有用。 I have tried using the border radius code for all browsers;
我尝试对所有浏览器使用边界半径代码;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
but it does not seem to pick it up, even when I use the !important tag. 但即使我使用!important标记,它似乎也无法拾取它。 I have also tried using pixels instead of percent.
我也尝试使用像素而不是百分比。 When I use the inspect element tool I can add this;
当我使用检查元素工具时,可以添加它。
.view img {
display: block;
position: relative;
border-radius: 100%;
}
and it works on the normal state, but when I put it into my site css it does not appear. 并且它可以在正常状态下运行,但是当我将其放入网站CSS时,它不会出现。
I have seen some people say that google just doesnt understand the overflow: hidden property and it has nothing to do with the border radius, however overflow: hidden does appear. 我见过有人说google只是不了解溢出:隐藏属性,它与边框半径无关,但是溢出:确实出现了。
Any help would be greatly appreciated. 任何帮助将不胜感激。 I have built the site on wordpress.
我已经在wordpress上建立了该网站。
Thanks, 谢谢,
Added 添加
.view-first img {
transition: all 0.2s linear;
border-radius: 100%; /* added new */
}
removed 去除
.view{
overflow:hidden; /* removed */
}
This looks to be a known bug in Chrome I'm afraid. 恐怕这似乎是Chrome中的已知错误。 It's related to transition mainly, and how the order of parent/child becomes when the DOM is being painted during a transition:
它主要与过渡有关,以及过渡期间绘制DOM时父/子的顺序如何:
https://code.google.com/p/chromium/issues/detail?id=157218 https://code.google.com/p/chromium/issues/detail?id=157218
As an alternative you could maybe make the entire circle including border and shadow increase in size. 作为替代方案,您可以使包括边界和阴影在内的整个圆圈的尺寸增加。 However I don't think that is the effect you want.
但是,我认为这不是您想要的效果。
Please also see this thread on Stack Overflow: Bug with transform: scale and overflow: hidden in Chrome 另请参见堆栈溢出上的该线程: 转换错误:缩放和溢出:隐藏在Chrome中
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.