transition, он будет срабатывать каждый раз, когда значения будут меняться:.items {
.single-chart {
.circular-chart {
.circle {
/* animation: progress 1s ease-out forwards; */
transition: stroke-dasharray 1s ease-out;
}
}
}
}.cube {
transform-origin: 50% 50% -25px;
}stroke-dasharray - это стандартный выбор. Но dash array может быть длинным, им можно описать самые разные последовательности линий и пробелов, так что если вам не нужны разные цвета, то можно сделать одну линию:
overflow: hidden. Внутри контейнера она может вылезать куда угодно, это уже не будет влиять на размер страницы в целом.
function putCircleOnPath(path, circle, percent) {
const length = path.getTotalLength();
const point = path.getPointAtLength(length * percent / 100);
circle.setAttribute('cx', point.x);
circle.setAttribute('cy', point.y);
}css.lint.vendorPrefix, смысл которой в том, что к свойству с префиксом нужно добавлять свойство без префикса, и если его нет, то это выглядит странно. В случае со stylelint - есть правило property-no-vendor-prefix. Там логика другая - в нормально выстроенном процессе сборки всю работу с префиксами на себя берет autoprefixer, соответственно само появление префиксов в коде выглядит как что-то лишнее. Если они добавляются автоматически, то писать их самому в обычных ситуациях вроде как не нужно.
position: relative совместно со свойствами top, right, bottom или left смещает элемент относительно его естественного расположения на странице. Поэтому все работает так, как и должно. Ваш main естественным образом расположен в верхней части родителя и смещен на 0px. Ну то есть никуда не смещен.position: absolute.
mask, и с clip-path. Суть проблемы в том, что маска применяется уже после трансформации, после поворота, и при расчете ее границ возникают сложности с округлениями до целого количества пикселей. Браузер не знает, в какую сторону лучше округлять. В результате для каких-то пикселей на границах маска применяется не так, как мы ожидаем, ее граница как бы смещается на 1px. Самый простой и безболезненный способ избавиться от проблемы в вашем конкретном случае - избавиться от масок. Нет маски - нет проблемы. Исходя из вашей задачи ничто не мешает использовать svg-иконки сразу, как есть, в виде обычных картинок, без нагораживания всей этой истории с белым квадратом, который потом обрезается.
padding сверху. А на некоторых - не добавляете. Вот он и ездит вверх-вниз внутри контейнера с overflow: hidden и обрезается. А звездочкам с абсолютным позиционированием на padding все равно, они не ездят. Это то, что нужно исправить.minimum-scale, maximum-scale и грубое user-scalable. С ними нужно быть осторожнее в продакшене, чтобы не ломать людям доступность, но в каких-то замороченых случаях отладки можно применить, чтобы забрать у эмулятора возможность что-то масштабировать и странно трактовать единицы измерения. Но, еще раз, практика эта странная, ваше верстка должна работать без таких ограничений.
пропорции 16:9
.whois-video {
aspect-ratio: 16 / 9;
}var video = document.querySelector('video');
<!-- 90 = x + width, 168 = y + height - правый нижний угол книги -->
<g transform="translate(90, 168.5)">
<g id="book">
<rect class="fil0 str0" x="60" y="18.5" width="30" height="150" transform="translate(-90, -168.5)" />
</g>
</g>calc(100% + 0.5px). В зависимости от логики в дизайне значения меняются, но логика остается - добавляем к значениям в коде доли пикселя до тех пор, пока не начнет округляться нормально. Иногда, если там картинка, помогает font-size: 0 для контейнера картинки. Все это лютые костыли, и так оно не должно работать, но более толкового решения пока не наблюдается. Это баг браузера, который мы не контролируем.