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

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

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐