Chrome 关于 CSS 转换和 overflow-y:scroll 或 auto 的问题

Question

首先我要为我可怕的代码道歉。

我有一个 "meet the team" 页面，右侧是姓名列表，左侧是信息。左侧有一个 div 包含传记，应用了以下 CSS 规则：

#bio
{
    width:290px;
    height:300px;
    margin:15px;
    font-size:18px;
    color:#003399;
    float:left;
    transition:opacity 0.8s;
    overflow-y:auto;
}

当您点击新名称时，此文本和其他文本将淡出。当不可见时，文本将替换为 swapText() 函数，该函数更改 divs 的 innerHTML 并且 divs 再次淡入：

function fadeText(id)
{
    var bio = document.getElementById('bio');
    var name = document.getElementById('staffname');
    var title = document.getElementById('stafftitle');

    bio.style.opacity = 0;
    name.style.opacity = 0;
    title.style.opacity = 0;

    setTimeout(function(){swapText(id);}, 1000);

    setTimeout(function(){bio.style.opacity = 1;name.style.opacity = 1;title.style.opacity = 1;}, 1200);
}

在Chrome中，如果传记大到可以有一个带有overflow-y:auto的滚动条，那么一旦文本淡入，整个div就会突然消失。每次使用 overflow-y:scroll 时 div 都会消失。这在 Firefox 中不会发生。

如果我将此代码添加到 fadeText() 函数，那么 Chrome 播放效果不错，但由于滚动条弹出和弹出，过渡最终看起来很笨拙。

bio.style.overflow = "hidden";
setTimeout(function(){bio.style.overflowY = "auto";}, 2000);

我在这里重现了错误：https://jsfiddle.net/fqca5gsw/

如有任何建议，我们将不胜感激！

Answer 1

只使用 flex 而不是 float 它们会导致问题，因为 li 元素的宽度占据了整个屏幕，这增加了 onClick() 事件区域的发生

<div class="flex">
    <div id="left">Short text</div>
    <div id="right">
        <li onclick="select(0);">Short text</li>
        <li onclick="select(1);">Long text</li>
    </div>
</div>

css

.flex {
    display: flex;
 }

#left {
    display: block;
    background-color: #F5F5F5;
    width: 300px;
    height: 300px;
    transition: opacity 0.8s;
    /* float: left; */
    overflow-y: auto;
}

Chrome 关于 CSS 转换和 overflow-y:scroll 或 auto 的问题

Chrome issues with CSS transitions and overflow-y:scroll or auto

javascript

css

firefox

google-chrome

css-transitions