Почему дергается страница на hover?

Question

[WizardW]

Господа верстальщики, подскажите, почему дергается страница и как это исправить?
Если проскролить до конца страницы или между центром скрола и концом, а потом наводить на Man бокс (изображение слева)
https://consilio1.netlify.app/

Comments

[Makssof]

Пожалуйста, не надо так)
https://i.imgur.com/yLNOIPd.gif

[WizardW]

Makssof, не буду)))

Answer 1

[hzzzzl]

в компонентах реакта никаких лишних обработчиков onMouseOver или подобных нет?
будто бы яваскриптом перематывается на начало страницы, почему-то

Comments

[WizardW]

Нету
Вот код компонента

const component = () => {
  return (
    <Wrapper>
      <Box backgroundImageSrc="https://picsum.photos/1500/1500">
        <BoxContainer>
          <Title>Man</Title>
          <Menu>
            <MenuItem>Clothes</MenuItem>
            <MenuItem>Shoes</MenuItem>
            <MenuItem>Bags</MenuItem>
          </Menu>
        </BoxContainer>
      </Box>
      <Box backgroundImageSrc="https://picsum.photos/1500/2200">
        <BoxContainer>
          <Title>Woman</Title>
          <Menu>
            <MenuItem>Clothes</MenuItem>
            <MenuItem>Shoes</MenuItem>
            <MenuItem>Bags</MenuItem>
          </Menu>
        </BoxContainer>
      </Box>
    </Wrapper>
  );
};

export default component;

import styled from "styled-components";

export const Wrapper = styled.section`
  margin: 40px auto;
  width: 90%;
  height: 780px;
  display: flex;
`;

export const Menu = styled.ul`
  margin-top: 80px;
  display: none;
`;

export const MenuItem = styled.li`
  cursor: pointer;
  text-transform: uppercase;
  text-align: center;
  padding: 20px 80px;
  font-family: Quicksand;
  font-style: normal;
  font-weight: 500;
  font-size: 32px;
  line-height: 40px;
  color: #fff;

  &:hover {
    margin: -1px;
    border: 1px solid rgba(255, 255, 255, 0.5);
  }
`;

export const Box = styled.div`
  width: 50%;
  height: 100%;
  background-image: url(${({ backgroundImageSrc }) => backgroundImageSrc});
  background-blend-mode: overlay;
  background-repeat: no-repeat;
  background-size: cover;
  &:hover {
    background-image: url(${({ backgroundImageSrc }) => backgroundImageSrc}),
      linear-gradient(rgba(61, 34, 21, 0.7), rgba(61, 34, 21, 0.7));
    ${Menu} {
      display: block;
    }
  }
`;

export const BoxContainer = styled.div`
  padding: 20% 25%;
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: flex-end;
`;

export const Title = styled.h1`
  font-family: Rozha One;
  font-style: normal;
  font-weight: normal;
  font-size: 72px;
  line-height: 87%;
  color: #fff;
`;

[WizardW]

Дерганье происходит только на левую сторону если наводиться, странно

[hzzzzl]

WizardW, да, смотрю сейчас тупо в консоли, если добавить этому ul-у display:block, то почему-то поднимается вся страница хмммм



то есть это не JS

Answer 2

[Павел Диденко]

При наведении на блок Man дергается из за повторного рендера картинки подложки.
Открываешь инструменты разработчика на вкладке elements, выделяешь блок с классом "styles__Box-be5yn1-3 kFJOuH", затем на вкладке со стилями рядом с инпутом с плейсхолдером filter выбираешь эффект hover. И потыкайся в него, увидишь как в ховере зашита картинка.
Была картинка -> навел -> убрал картинку у блока -> добавил картинку в ховере

Comments

[WizardW]

Ну да, я в ховере меняю картинку
с
background-image: url(${({ backgroundImageSrc }) => backgroundImageSrc});
на
background-image: url(${({ backgroundImageSrc }) => backgroundImageSrc}),
linear-gradient(rgba(61, 34, 21, 0.7), rgba(61, 34, 21, 0.7));

[WizardW]

Убрал эти строчки кода, всё равно дергается (из-за того, что для меню я даю display: block)

[WizardW]

Единственное, что выяснил, что дергается, если у Title margin-top: auto либо BoxContainer имеет justify-content: flex-end