Есть такой браузер -- Vivaldi. Разрабатывается бывшей командой Opera. Его особенность -- интерфейс на CSS и JS. В этом есть и преимущества, и недостатки. Преимущества -- действительно обладает наивысшей кастомизацией среди браузеров (из известных мне). Недостатки -- следствие того же CSS и JS. Пользователи жалуются на серьезные тормоза интерфейса на слабых ПК. Здесь трудно предъявить что-то разработчикам. И я согласен с ними, что мощность процессоров растет быстрее, чем сложность браузера. Вопрос нестандартный, т.к. я могу разместить только свой предположительный код вопроса. Он работает почти так, как надо. А полный код, и все результаты видны прямо в самом браузере. Могу предложить только видео.
В оригинале эти диалы не носятся по экрану, а стоят на своем месте, там где и должны быть. Там было простое неинтересное смещение на -1 px.
Оригинал:
.dials {
display: flex;
flex: 0 0 auto;
min-width: 100%;
justify-content: flex-start;
align-items: center;
flex-direction: column;
flex-wrap: wrap;
}
.dials .dial {
contain: style;
outline: 0;
text-align: left;
touch-action: none;
height: var(--backgroundHeight);
width: var(--thumbnailWidth);
container-type: inline-size;
container-name: dial;
.dials-wrapper:not(.dragging-disabled) .dials .dial:hover,
.dials-wrapper:not(.dragging-disabled) .dials .dial:focus {
margin-top:-1px;}
Оригинал common.css, классы в строке 11867. Видно, что классы выбраны верно.
Вот я изменил, результат на ВИДЕО:.
.dials-wrapper:not(.dragging-disabled) .dials .dial:hover,
.dials-wrapper:not(.dragging-disabled) .dials .dial:focus {
transform-origin: center center !important;
transform: rotateY(180deg) !important;
box-shadow: 5px 5px 20px #FF0000 !important;
transition: transform 2s cubic-bezier(0.1,0.9,0.5,2) 1s !important; }
.dials-wrapper:not(.dragging-disabled) .dials .dial {
transition: transform 2s cubic-bezier(0.1,0.9,0.5,2) !important; }
Если оставить оригинальные классы, или удалить только :not(...) -- работает одинаково.
Чтобы вам самим проверить результат, надо загрузить браузер, установить его (как любой Chromium, позволяет Portable, т.е. может работать не основным браузером на новой Windows из любой папки), указать Вашу внешнюю папку с собственными стилями, положить в нее свой name.css.
Форум: Modding Vivaldi, как это сделать. Перезапустить, смотреть результат.
Легко сказать -- измени стили и сразу все увидишь. Это если знаешь, что менять.
Страница, Inspecting the Vivaldi UI with DevTools, где показано, как инспектировать, Dev Tools для самого браузера. Покажет названия стилей этой Express Panel.
Вопрос: что еще надо изменить в оригинальном файле стилей, чтобы убрать это паразитное смещение к 1 квадрату ?.
!important;
в приличном обществе фронтенд специалистов бьют об монитор лицом? А если серьезно, то ваша проблема явно не связана с самой анимацией на ховер, она связана с тем, что браузер не знает, что есть начальная позиция и по этому пытается вязать к первому элементу классов. Я б дебажел присваивая эффект анимации не на класс а на id. Если мысль правильная и подключая анимацию по айдишникам проблемный эффект пропадает, то думал бы как это обойти. Возможно правильным решением будет написать с примером разработчикам браузера.