Chrome问题与CSS过渡和溢出y:滚动或自动

Question

首先我要为我的糟糕代码道歉。

我有一个"与团队见面"的页面，右边是名字列表，左边是信息。在左侧有一个包含传记的div，应用了以下CSS规则:

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

当你点击一个新的名字，这个文本和其他文本将消失。当不可见时，文本将被替换为swapText()函数，该函数将改变div的innerHTML，并且div将再次淡出:

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);

我在这里复制了这个bug: 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;
}