CSS 过渡和溢出的 Chrome 问题：滚动或自动答案

【问题标题】：Chrome issues with CSS transitions and overflow-y:scroll or autoCSS 过渡和溢出的 Chrome 问题：滚动或自动
【发布时间】：2015-11-06 07:18:03
【问题描述】：

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

我有一个“认识团队”页面，右侧是姓名列表，左侧是信息。左侧有一个包含传记的 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 就会突然消失。 div 每次使用 overflow-y:scroll 都会消失。这在 Firefox 中不会发生。

如果我将这段代码添加到fadeText() 函数中，那么Chrome 的效果会很好，但是由于滚动条的进出，过渡看起来很笨拙。

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

我已经在此处重现了该错误：https://jsfiddle.net/fqca5gsw/

任何建议将不胜感激！

【问题讨论】：

想通了，你的浮点数导致了这个问题，检查 li 元素的宽度，它们的宽度是 100%
非常感谢，删除浮动完全修复了它。想想看，我什至不记得它为什么会在那里。
好的，但如果你仍然希望那些 li 在右侧，我已经发布了一个解决方案
在我正在处理的实际页面上，删除浮动不会使其他任何内容不对齐，但还是谢谢你！ :)

标签： javascript css google-chrome firefox css-transitions

【解决方案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;
}

【讨论】：