那些遇到过的问题

溢出:隐藏不适用于Chrome中的伪元素

jbu*_*483 9 css google-chrome hover css3 pseudo-element

我正在制作一个"灰色主题" - 虽然还有一些调整要做,但我对它很满意.

但我似乎偶然发现了一个问题,就Chrome中的按钮(其他浏览器似乎没问题)而言,悬停效果似乎会产生不必要的结果.

如果我将鼠标悬停在菜单上,然后继续悬停"测试按钮",则伪元素不会粘附到边框半径上,从而打开方形角hover.

在此输入图像描述

我会寻找坚持边界半径的伪元素.

我的按钮代码是:

+ 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);
  });
}();
Run Code Online (Sandbox Code Playgroud) 
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;
}
Run Code Online (Sandbox Code Playgroud) 
<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>
Run Code Online (Sandbox Code Playgroud)

有没有办法阻止按钮的伪出现在实际元素边界半径的前面(效果是生成'闪耀')？

重现说明

  • 在chrome中运行代码段
  • 悬停径向菜单
  • 现在悬停按钮
  • 动画结束时,请看按钮的'方角'.

我现在得到的是什么:

在此输入图像描述

我想要得到什么

在此输入图像描述

我在最新版本的chrome中遇到了这个问题(似乎).

要点注意

完全在径向菜单上使用同样的效果,所以我不确定为什么它出现在按钮实例上？

有没有办法确保在生产中不会出现这种情况,这样就不会出现这个"方角"(仅在最新的镀铬中出现问题)？

更新

  • 另一位用户报告说;

右键单击按钮,左键单击检查元素并在开启工具开启之前悬停=> bug(也是"悬停"效果有错误)

将重现此问题.

  • 而另一个用户根本无法重现此问题(在V.24上)

sko*_*jic 1

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

will-change CSS 属性为作者提供了一种方式来提示浏览器元素上预期的更改类型，以便浏览器可以在元素实际更改之前提前设置适当的优化。这些类型的优化可以通过在实际需要之前提前完成可能昂贵的工作来提高页面的响应能力。

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

.will_change:hover *,
.will_change:hover *:before,
.will_change:hover *:after {
    will-change: transform, opacity;
}
Run Code Online (Sandbox Code Playgroud)

.will-change是父元素的类，您可以在此处查看更新的 CodePen的详细信息。

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

  • 它不会像上面提到的Boltclock那样随机发生，而是仅在浏览器同时渲染其他转换时发生。仅在将鼠标悬停在上面的菜单之后（虽然该动画尚未完成），我们才在按钮上开始了新的菜单。在您的示例中，如果您从下方或侧面悬停按钮，则您看不到任何故障。
  • 我的猜测是：使用will-change强制图形加速，这样可以节省 CPU 犯错误的时间。类似的技巧有助于-webkit-transform: translateZ(0px)在 Chrome 上进行文本渲染。

归档时间：

查看次数：

1066 次

最近记录：

10 年，11 月 前
使用过渡时的问题+不透明度变化+溢出隐藏 8
更多相关链接
相关归档
李标签周围的边框 30
你可以在背景图像上叠加透明的css3渐变吗？ 29
在引导响应网格中将图像裁剪为宽高比 17
是否需要在Safari和Chrome中测试网页？ 5
使用旋转webkit时出现锯齿状文本问题 4
在输入类型文本中包含字体真棒 4
如何显示通过动画排序的HTML元素 3
在完成动画制作后,如何让我的css3动画保持其动画位置？ 2
如何用伪元素制作弯曲的三角形气泡？ 1
使用CSS禁用链接但启用标题 1
难疑归档
如何检查对象是否是数组？ 2581
403 Forbidden vs 401 Unauthorized HTTP响应 2544
如何使用jQuery刷新页面？ 2361
Java中的"实现Runnable"与"扩展线程" 2023
为什么++ [[]] [+ []] + [+ []]返回字符串"10"？ 1613
禁用Chrome缓存以进行网站开发 1563
谁正在侦听Mac OS X上的给定TCP端口？ 1267
PHP和枚举 1114
git:撤消所有工作目录更改,包括新文件 1108
如何配置Visual Studio代码以始终在新选项卡中打开文件？ 1078