CSS过渡使Safari可以向上滚动到顶部

Question

Sorry for my bad english, i'm coding a webpage using JS and CSS, i'm using css grid to do the layout, i have a div with many buttons with hover transitions for shadow and to increase the size of the button.

When i scroll in that container to see other text box and i hover on any button and the transition starts, the div scrolls back to the top.

This only happens in Safari, in Chrome it works.

I've tried to disable the transitions and the issue is fixed I've tried to set the container position to absolute (despite it no longer belongs to the grid and breaks all the layout) and it fixs the problem

[.ContenedorPrincipal
{
    display              : grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows   : 50px auto 22px;
    height               : 100vh;
    grid-column-gap      : 10px;
    grid-row-gap         : 1%;
    min-width            : 780px;
    min-height           : 480px;
}

.BarraSuperior
{
    grid-column-start: 1;
    grid-column-end  : 5;
    background       : rgba(0, 0, 0, 0.5);
    color            : white;
    padding-left     : 10px;
    padding-right    : 10px;
    display          : flex;
    justify-content  : space-between;
    overflow         : hidden;
    flex-wrap        : wrap;
    padding          : 5px;
  z-index: 10;


}

.Escenario
{
    grid-column-start: 1;
    grid-column-end  : 4;
    background       : rgba(255, 255, 255, 1);
    margin-left      : 10px;
    min-height       : 400px;
    min-width        : 400px;


}

.MenuAsignacion
{
    grid-column-start: 4;
    grid-column-end  : 5;
    min-width        : 350px;
    max-width        : 350px;
    margin-right     : 10px;
    background       : rgba(224, 224, 224, 1);
    overflow         : hidden;
    overflow-y       : auto;
    white-space      : nowrap;
    padding          : 10px;
    display          : flex;
    flex-direction   : column;
  z-index: 8;

  -webkit-transition: all 1s ease-out;
  -moz-transition   : all 1s ease-out;
  -o-transition     : all 1s ease-out;
  transition        : all 1s ease-out;

}

.scrollMenuAsignacion
{
  overflow: hidden;
}

.BarraInferior
{
  max-height: 22px;
    grid-column-start: 1;
    grid-column-end  : 5;
    background       : rgba(0, 0, 0, 0.5);
    color            : white;
    padding-left     : 10px;
    padding-right    : 10px;
    display          : flex;
    flex-wrap        : wrap;
    justify-content  : space-between;
    cursor           : default;
}][1]

I expect that it would work like in Chrome

Here's an image https://i.stack.imgur.com/T8FOe.gif