Chrome 不透明度过渡错误

Posted 2023-03-06

【中文标题】Chrome 不透明度过渡错误

【英文标题】：Chrome opacity transition bug

【发布时间】：2015-07-18 11:36:55

【问题描述】：

所以我正在尝试构建一个包含 2 个 div 的链接页面。 两者都覆盖了 50% 的屏幕。我想保留这个 100% CSS，因为我不想使用 javascript，而且我不熟悉 Jquery。

根据许多 *** 帖子，我的问题似乎是一个错误。然而，他们都没有对我有用的解决方案.. 除了 Chrome 和 Safari，css 的工作方式与我在每个浏览器中的计划一样。

这是我的 html 示例：

<div id="left">
  <div id="leftImage">
     //the background image
  </div>
  <div id="overlayLeft">
     //a logo that goes on top of the image when not hovering over it
  </div>
</div>
<div id="right">
  <div id="rightImage">
     //the background image
  </div>
  <div id="overlayRight">
     //a logo that goes on top of the image when not hovering over it
  </div>
</div>

而且我的 CSS 两边都是一样的（除了 left:0 之类的东西）

#left 
    /* Set rules to fill background */
    min-height: 100%;
    min-width: 50%;

    /* Set up proportionate scaling */
    width: 50%;
    height: auto;

    position: fixed;
    top: 0;
    left: 0; 

    background: #0C4270;
    background-size:cover;  


#leftImage     
    opacity:0.15;
    filter: alpha(opacity=15); /* For IE8 and earlier */
    background: rgba(0, 0, 0, 0.15);    
    -webkit-transition: opacity 2.00s ease;
    -moz-transition: opacity 2.00s ease;        
    transition: opacity 2.00s ease; 
    position: relative;     
    overflow: hidden;   


#leftImage:hover 
    opacity:1.00;
    filter: alpha(opacity=100); /* For IE8 and earlier */
    background: rgba(0, 0, 0, 1.0); 


#leftImage:hover + #overlayLeft
    visibility: hidden; 

因此，当我将鼠标悬停在左侧图像上时，图像会消失几秒钟（大约 10 秒），然后重新加载。我唯一看到的是蓝色背景，直到图像重新加载。

奇怪的是，这不会发生在我的正确图像上。该图像按预期工作。

我已经尝试了一些类似其他帖子中建议的方法，例如

-webkit-backface-visibility: hidden;

-webkit-transform: translateZ(0);

-webkit-perspective: 1000;

transform: translate3d(0px,0px,0px);

postition: static; （这个效果最好，但还是没用，因为图片不会被拉伸，会卡在左下角）

等等。甚至没有一个工作:( 我想达到什么目标？ - 我希望图像位于我没有悬停的 div 的背景上（所以它通过不透明度隐约可见） - 当 div 悬停时，图像应该完全可见（无不透明度）。

这两个功能都适用于除 Chrome 和 Safari 之外的所有浏览器。

有什么解决办法吗？

根据要求：jsfiddle（使用 Chrome 或 Safari 打开此错误）

【问题讨论】：

你能添加一个 JSFiddle 吗？

【参考方案1】：

我浓缩了几条:hover 规则，似乎已经解决了。

CSS：

body 
    background: #ffff;

/* Setup for the halves of the screen */
 #right 
    /* Set rules to fill background */
    min-height: 100%;
    min-width: 50%;
    /* Set up proportionate scaling */
    width: 50%;
    height: auto;
    position: fixed;
    top: 0;
    right: 0;
    background: #389A7A;
    background-size:cover;

#left 
    /* Set rules to fill background */
    min-height: 100%;
    min-width: 50%;
    /* Set up proportionate scaling */
    width: 50%;
    height: auto;
    position: fixed;
    top: 0;
    left: 0;
    background: #0C4270;
    background-size:cover;

/* Setup for the image containers */
 #rightImage, #leftImage 
    opacity:0.15;
    filter: alpha(opacity=15);
    /* For IE8 and earlier */
    background: rgba(0, 0, 0, 0.15);
    -webkit-transition: opacity 2.00s ease;
    -moz-transition: opacity 2.00s ease;
    transition: opacity 2.00s ease;
    position: relative;

#rightImage:hover, #leftImage:hover 
    opacity:1.00;
    filter: alpha(opacity=100);
    /* For IE8 and earlier */
    background: rgba(0, 0, 0, 1.0);

#rightImage:hover + #overlayRight, #leftImage:hover + #overlayLeft 
    visibility: hidden;

/* Setup for the images */
.rightImage 
    /* Set rules to fill background */
    min-width: 50%;
    min-height: 100%;
    /* Set up proportionate scaling */
    width: 50%;
    height: auto;
    /* Set up positioning */
    position: fixed;
    top: 0px;
    right: 0;

.leftImage 
    /* Set rules to fill background */
    min-width: 50%;
    min-height: 100%;
    /* Set up proportionate scaling */
    width: 50%;
    height: auto;
    /* Set up positioning */
    position: fixed;
    top: 0px;
    left: 0;

/* Setup for the logo image */
#overlayLeft 
    visibility: visible;

.overlayLeft 
    /* Set rules to fill background */
    min-height: 40%;
    min-width: 40%;
    /* Set up proportionate scaling */
    width: 40%;
    height: 40%;
    /* Set up positioning */
    position: absolute;
    top: 30%;
    left: 30%;
    pointer-events: none;

#overlayRight 
    visibility: visible;

.overlayRight 
    /* Set rules to fill background */
    min-height: 40%;
    min-width: 40%;
    /* Set up proportionate scaling */
    width: 40%;
    height: 40%;
    /* Set up positioning */
    position: absolute;
    top: 30%;
    right: 30%;
    pointer-events: none;

演示： https://jsfiddle.net/hopkins_matt/mxbjja29/2/