Почему border-image + анимированный SVG лагает!?

А можете пожалуйста ссылку скинуть, а то не грузится здесь почему то

Почему border-image + анимированный SVG лагает!?

imko, так и делал, убирал анимацию из svg, оставлял все остальное, затем сверху доп элементом делал эту самую линию и позиционировал. И вот тут вторая проблема. Не получается во всех случаях попасть пиксель в пиксель, иногда это просто невозможно иногда трудно, а иногда получается. В общем достаточно криво получается вставить полоску.

Почему border-image + анимированный SVG лагает!?

imko, Так в том то и проблема, что визуал резать нельзя. Мне необходимо сохранить все полностью как есть, за исключением лагов xD. Я пробовал убирать все кроме данной линии, но тоже не сильно помогало. Вот если бы был какой нибудь аналог свойства border-image и при этом с нормально работающей анимацией... Есть еще варианты как это исправить не убавляя визуал?

Свойство margin-bottom не применяется для элемента HTML?

У вас для класса .data_text написано margin-left вместо margin-bottom

Как это сверстать, очень сложный дизайн карточки?

Всем, кто ждал...
Вот долгожданный ответ, как это было сделано мною. Тут вместе с адаптивом и некоторыми нюансами под мой проект.

https://codepen.io/vahromeevilya-widestudio/pen/ExQOWJy

Все величины в примере сделаны на REM и EM просто потому что так работает моя сборка, но все также будет отлично работать и с PX. А то что так много Брейкпоинтов - это динамическое изменение некоторых величин чтобы все классно адаптировалось.

Как это сверстать, очень сложный дизайн карточки?

Владимир Пилипчук, Я не дизайнер xD, не смогу вам объяснить почему так, а не иначе. Но если просто глянуть на дизайн со стороны, как обычный user, то выглядит эффектно ИМХО

Как это сверстать, очень сложный дизайн карточки?

Ну здесь надо дизайн в целом смотреть, так то он выглядит очень даже круто. Мне уже совсем скоро предстоит начать это верстать, последнии согласовании по макету сделаны. Думаю, потом, если получится сделать это круто и адаптивно, в песочнице воссоздам и приложу сюда как ответ.

Почему в Safari (iOS) после добавления класса элементу стили применяются только после скролла?

Татьяна Комарова, удалось найти ответ? У меня тоже возник подобный баг

Как это сверстать, очень сложный дизайн карточки?

DENIS Kokorev, Ахахха, возможно, но мне самому даже из-за спортивного азарта и поднятия своих навыков хочется это сверстать.

Как это сверстать, очень сложный дизайн карточки?

Aetae, Огромное спасибо за наводку, скорее всего так и буду верстать. Вот исходник карточки. Если не сложно могли бы вы его использовать для демонстрации на codepen?

Как это сверстать, очень сложный дизайн карточки?

А вот это уже интересно, есть примеры готовой реализации?

Как это сверстать, очень сложный дизайн карточки?

Ага, сам об этом думал, возможно и придется так делать. Но с помощью clip-path я не знаю как реализовать частичное заполнение блока по типу как линия сделана синия

Что делать с таким фоном?

Если это сделано картинкой, то только ей и остается делать, но проблема в том, что картинка таких размеров может сильно ударить по оптимизации сайта и баллам page speed . Я бы на вашем месте попробовал обсудить с дизайнером другой вариант бэка

Swiper thumbs иногда не работает?

AnatoliyKarpov, Мне удалось найти решение, можете глянуть если интересно по этой ссылке

Swiper thumbs иногда не работает?

AnatoliyKarpov удалось найти решение? У меня тоже данный вопрос возник.

Почему текст не встает по центру блока?

Общими усилиями мы нашли ответ на вопрос, проблема оказалась в самом шрифте Gotham Pro Regular, когда я поставил Arial, все встало как надо

Почему текст не встает по центру блока?

Всем огромное спасибо за ответы, я решил проверить теорию кривоты шрифтов, поставил обычный Arial и все выглядит просто балдежно. Действительно проблема в шрифте оказалась

Почему текст не встает по центру блока?

убрал все лишние паддинги и марджини задал родителю align-items: center;

.breadcrumbs {
	//margin: rem(-10) rem(-8);
	display: flex;
	flex-wrap: wrap;
	align-items:center;
	a,
	span {
		font-size: rem(11);
		line-height: rem(13);
		color: $breadcrumb;
		//padding: rem(10) rem(8);
		//display: inline-flex;
		//align-items:center;
		position: relative;
	}
	a.breadcrumbs__link {
		text-decoration: underline;
		padding-right: rem(12);
		&::after{
			content:'';
			width: rem(4);
			height: rem(4);
			border-radius: 50%;
			background: $greenMain;
			position: absolute;
			right: 0;
			top: 50%;
			transform: translateY(-50%);
		}
		@media (any-hover: hover){
			&:hover{
				text-decoration: none;
			}
		}
	}

	&__current {
	}
}

Но проблема осталась и она явно видна на этих скринах