css - 溢出 : hidden not applying to a pseudo element in Chrome

标签 css google-chrome hover pseudo-element

我正在生成一个“灰色主题”——虽然还有一些需要调整的地方，但我对它相当满意。

但我似乎在这里偶然发现了一个与 Chrome 中的按钮有关的问题(其他浏览器似乎没问题)，悬停效果似乎会产生不需要的结果。

如果我将鼠标悬停在菜单上，然后继续悬停“测试按钮”，伪元素不会遵守 border-radius，在 hover 上给出方 Angular 。

enter image description here

我会寻找符合边界半径的伪元素。

我的按钮代码是:

+ function() {
  var to;
  $(".wrap").on('mouseenter', function() {
    var circles = $(this).find(".circle");
    var degree = (2 * Math.PI) / circles.length; //calc delta angle
    var transforms = [];

    // Calculate the position for each circle
    circles.each(function(index) {
        var x = 100 * Math.cos(-0.5 * Math.PI + degree * (-1 * index - 0.5));
        var y = 100 * Math.sin(-0.5 * Math.PI + degree * (-1 * index - 0.5));

      transforms.push('translate(' + x + 'px,' + y + 'px)');
    });

    // Function to moves all the circles
    // We'll pop a circle each time and than call this function recursively
    function moveCircles() {
      var transform = transforms.shift();
      circles.css('transform', transform);

      circles.splice(0, 1);
      if (circles.length) to = setTimeout(moveCircles, 400);
    }

    moveCircles();
  });

  $(".wrap").on('mouseleave', function() {
    var circles = $(this).children().css('transform', '');
    clearTimeout(to);
  });
}();
html, body {
    background:darkgray
}

/*****************Radial Menu (plus bit of button)***********************/

.wrap {
    height:300px;
    width:300px;
    position:relative;
    transform-origin: center center;
    transition:all 0.8s;
}
.circle {
    transition:all 0.8s;
    position:absolute;
    height:5px;
    width:5px;
    text-align: center;
    line-height: 15px;
    top: calc(50% - 2px);
    left: calc(50% - 2px);
    border-radius: 50%;
    overflow:hidden;
}
.parent{
     transition:all 0.8s;
    position:absolute;
    background:gray;
    height:50px;
    width:50px;
    text-align: center;
    line-height: 25px;
    top: calc(50% - 25px);
    left: calc(50% - 25px);
    border-radius: 50%;
    z-index:8;
    box-shadow: inset 2px 2px 10px black, inset 0 0 15px black, 0 0 15px black;
}
.parent:before,.parent:after{
    content:"";
    position:absolute;
    transition:all 0.8s;
    height:5px;
    width:25px;
    top:22px;
    left:12px;
    background:black; 
    opacity:1;
}
.parent:before{
  top:15px;
    box-shadow: 0 14px 0 black;
}
.parent:hover:before,.parent:hover:after{
    transform:translate(0,20px);
    color:gray;
    opacity:0;
    box-shadow: 0 14px 0 none;
}
.wrap:hover .parent,.wrap:hover .parent:before,.wrap:hover .parent:after{
    background:darkgray;
}
.wrap:hover .parent:before{
    box-shadow:none;
}
.wrap:hover .circle {
    height:50px;
    width:50px;
    line-height: 25px;
    top: calc(50% - 25px);
    left: calc(50% - 25px);
    box-shadow: inset 2px 2px 10px black, inset 0 0 15px black, 0 0 15px black;
}
.circle img {
    position:absolute;
    height:100%;
    width:100%;
    left:0;
    top:0;
}
.circle:before {
    border-radius:50%;
    transition:all 0.8s;
    content:"";
    position:absolute;
    height:100%;
    width:100%;
    top:0;
    left:0;
    z-index:8;
}
.circle:after,button:after {
    transition:all 0.8s;
    border-radius:50%;
    content:"";
    position:absolute;
    height:200%;
    width:200%;
    top:50%;
    left:200%;
    z-index:8;
    background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(50%, rgba(255, 255, 255, 0.4)), color-stop(100%, rgba(255, 255, 255, 0)));
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 100%);
    background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 100%);
    background: -ms-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 100%);
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#00ffffff', GradientType=1);
}
.circle:hover:after,button:hover:after {
    left:-200%;
    top:-50%;
}
.circle:hover:before {
      box-shadow: inset 2px 2px 10px black, inset 0 0 15px black, 0 0 15px black;
}

/********************Button************************/

button {
    margin:5px;
    position:relative;
    background:gray;
    outline:0;
    border:0;
    padding:10px;
    border-radius:10px;
    box-shadow: inset 2px 2px 10px transparent, inset 0 0 15px transparent, 0 0 15px black;
    background:rgba(0, 0, 0, 0.2);
    transition:all 0.4s;
    overflow:hidden;
}
button:active {
    box-shadow: inset 2px 2px 8px black, inset 0 0 10px black, 0 0 18px black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<hr/>
hover near the menu to open
<div class="wrap">
  <div class="parent"></div>
    <div class="circle">
        <img src="http://placekitten.com/g/300/300" />
    </div>
    <div class="circle">
        <img src="http://placekitten.com/g/200/300" />
    </div>
    <div class="circle">
        <img src="http://cdn.flaticon.com/png/256/56729.png" />
    </div>
     <div class="circle">
        <img src="http://cdn.flaticon.com/png/256/54976.png" />
    </div>
    <div class="circle">Just Text</div>
    <div class="circle">
        <img src="http://cdn.flaticon.com/png/256/56582.png" />
    </div>
</div>
<hr/>
then hover button
<button>Test Button</button>

有没有办法阻止按钮的伪出现在实际元素边框半径的前面(效果是产生“闪光”)？

重现说明

  • 在 chrome 中运行代码段
  • 悬停径向菜单
  • 现在悬停按钮
  • 在动画结束时查看伪按钮的“方 Angular ”。

我目前得到的:

enter image description here

我想要得到什么

enter image description here

我在最新版本的 chrome 中遇到了这个问题(看起来)。

注意事项

同样的效果完美地用在了径向菜单上，所以我不确定为什么它会出现在按钮实例上？

有没有办法确保这种情况不会在生产中发生，这样这个“方 Angular ”就不会出现(似乎只在最新的 chrome 中出现问题)？

更新

  • 另一位用户报告说；

right click on button, left click inspect element and hover just before the dev tools open =>bug (also the "hover out" effect has the bug)

将重现此问题。

  • 还有一个用户根本无法重现这个问题(在 V.24 上)

最佳答案

也许我们都应该阅读更多关于 css 的内容 will-change属性(property)，你可以找到一篇有用的文章here .这是一项实验性技术，目前受 Chrome、Firefox 和 Opera 支持。

The will-change CSS property provides a way for authors to hint browsers about the kind of changes to be expected on an element, so that the browser can setup appropriate optimizations ahead of time before the element is actually changed. These kind of optimizations can increase the responsiveness of a page by doing potentially expensive work ahead of time before they are actually required.

它通过在过渡发生之前准备层来帮助您的浏览器使用 GPU 呈现元素过渡。在这种情况下它会有所帮助，我们只需要小心设置此属性即可。我们不应该为页面上的每个元素都设置will-change，而应该在即将发生过渡的时刻针对特定元素。这就是为什么我们应该像这样在父元素上使用 :hover 状态:

.will_change:hover *,
.will_change:hover *:before,
.will_change:hover *:after {
    will-change: transform, opacity;
}

.will-change是父元素的类，详见updated CodePen here .

如果我们想分析 Chrome 中发生这种情况的时间和原因，那么我可以告诉您我注意到的情况:

  • 这不是随机发生的 boltclock上面写了，但只有当浏览器同时呈现其他过渡时。仅在将菜单悬停在上方(动画尚未完成)后，我们才在按钮上开始新的动画。在您的示例中，如果您从下方或侧面悬停按钮，则不会出现任何故障。
  • 我的猜测是:使用 will-change 会强制图形加速，从而避免 CPU 出错。 -webkit-transform: translateZ(0px) 的类似技巧有助于在 Chrome 上呈现文本。

关于css - 溢出 : hidden not applying to a pseudo element in Chrome，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28539721/

上一篇：css - 在 meteor 中使用 chrome DevTools 的实时 css/less/scss 版本

下一篇：当宽度小于省略号字符时，CSS 省略号截断

相关文章：

Jquery Slider 无法在主页上运行

html - 是否有一种跨浏览器、向后兼容的方式来编写背景渐变代码？

javascript - 如何忽略 Google Chrome Javascript 控制台中的重复条目(在 Web 开发人员工具中)？

javascript - 在 Safari 和 Javascript 中使用 for in(最后一个键值设置为 map )

css - 悬停时的大纲节点

html - CSS3 菜单展开，悬停时消失

jquery - 为什么这在 jsfiddle 中有效，但在其他地方却无效？

javascript - Angular Flot - 通过 Alpha 传递十六进制颜色在 Google Chrome 中不起作用

html - css hover 不适用于先例元素

html - 调整屏幕大小时如何重新排序 flex 元素？

©2024 IT工具网  联系我们