Дневник разработки: сайт-визитка. День 2 (первый баг)
Как и обещала — рассказываю про первый баг, который поймала при тестировании. При наведении на нижнюю границу кнопки «12 учебных проектов...» карточки начинали дёргаться вверх-вниз, вместо того чтобы плавно раскрыться. Причина оказалась в этой строчке:
css .projects__trigger:hover { transform: translateY(-2px); // причина бага box-shadow: 0 4px 14px rgba(233, 30, 140, 0.25); }
translateY физически сдвигал кнопку на 2px вверх при :hover. Если курсор оказывался ровно у нижней грани, запускался замкнутый цикл: навели → кнопка уехала вверх → курсор оказался снаружи → hover пропал → кнопка вернулась назад → курсор снова внутри — и так по кругу, десятки раз в секунду. А так как JS слушает mouseenter/mouseleave на этой же кнопке, вместе с ней дёргались и карточки. Фикс: убрала translateY, оставила только тень — она не меняет геометрию элемента, поэтому такой цикл физически невозможен. Кнопка всё ещё «оживает» при наведении, но больше не убегает от курсора. Заметка на будущее: если на элементе одновременно висит :hover с transform и JS-логика на mouseenter/mouseleave — это потенциальный источник такого цикла, особенно если transform двигает элемент перпендикулярно границе, у которой стоит курсор.
1 скрин - стрелочкой отметила границу выкатывания карточек, где и был цикл. 2 скрин - открытие реализовала по клику и в десктопной, и в мобильной версии
Почем было "12", а стало "6"? Несколько проектных работ велись в одном и том же репозитории, и по итогу готовых проектов будет 9 за курс (6 готовы полностью).
