Chrome出现CSS过渡和溢出y：scroll或auto问题

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浏览器中，如果传记足够大，可以具有带有溢流y：auto的滚动条，则一旦文本淡出，整个div就会突然消失。 div每次通过溢出-y：scroll消失。 在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;
}