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

Question

I shall preface this by apologising for my horrendous code.

I have a "meet the team" page with a list of names on the right and information on the left. There is a div containing a biography on the left with the following CSS rules applied:

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

When you click on a new name, this text and other text will fade out. When invisible, the text is replaced with the swapText() function which changes the innerHTML of the divs and the divs fade back in again:

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

In Chrome, if the biography is large enough to have a scrollbar with overflow-y:auto, then once the text is faded back in, the entire div disappears suddenly. The div disappears every time with overflow-y:scroll. This does not happen in Firefox.

If I add this code to the fadeText() function, then Chrome plays nice, but the transition ends up looking clumsy because of the scrollbar popping in and out.

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

I have reproduced the bug here: https://jsfiddle.net/fqca5gsw/

Any advice would be greatly appreciated!

Answer 1

Just use flex , instead of float they are causing the problem the width of li element is taking the whole screen which is increasing the onClick()event area to happen

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