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 для контейнера картинки. Все это лютые костыли, и так оно не должно работать, но более толкового решения пока не наблюдается. Это баг браузера, который мы не контролируем.
не влезая в плагин, уже на загруженной странице
const table = document.querySelector('table');
const html = table.innerHTML;
const modifiedHtml = html.replace(/>\s+<i/g, '> <i');
table.innerHTML = modifiedHtml;в голове есть идея высчитывать ширину и высоту контейнера кнопки, а после отслеживать само движение мыши, но не знаю правильно это или нет
Можно ли как то совместить эти события, чтобы и слайды листать, и кнопки в плеере нажимать?
<div class='swiper' id='my-slider'>
<div class='swiper-wrapper'>
<div class='swiper-slide'>Slide 1</div>
<div class='swiper-slide' id='youtube-slide'>
<div id='player'></div>
</div>
<div class='swiper-slide'>Slide 3</div>
<div class='swiper-slide'>Slide 4</div>
</div>
</div>
<style>
#player {
pointer-events: none;
}
</style>const youtubeScriptTag = document.createElement('script');
youtubeScriptTag.src = 'https://www.youtube.com/iframe_api';
document.body.appendChild(youtubeScriptTag);
window.onYouTubeIframeAPIReady = () => {
const player = new YT.Player('player', {
videoId: 'orbr-C3gYKk',
playerVars: {
controls: 0
},
events: {
onReady: (event) => {
const youtubeSlide = document.getElementById('youtube-slide');
let isVideoPlaying = false;
youtubeSlide.addEventListener('click', () => {
if (isVideoPlaying) {
event.target.stopVideo();
} else {
event.target.playVideo();
}
isVideoPlaying = !isVideoPlaying;
});
}
}
});
}
const swiper = new Swiper('#my-slider', {});// Тут, конечно, лучше какие-нибудь id сделать для однозначности
const circle = document.querySelector('.circle');
const arrow = document.querySelector('.arrow');
document.addEventListener('mousemove', (e) => {
const circleRect = circle.getBoundingClientRect();
const circleCenterX = circleRect.left + circle.offsetWidth / 2;
const circleCenterY = circleRect.top + circle.offsetHeight / 2;
const deltaX = e.clientX - circleCenterX;
const deltaY = e.clientY - circleCenterY;
const angleInRadians = Math.atan2(deltaY, deltaX) - Math.PI / 2;
const angleInDegrees = 180 * angleInRadians / Math.PI;
const angleFrom0To360 = (angleInDegrees + 360) % 360;
const shouldEffectBeApplied = deltaY < 0;
if (shouldEffectBeApplied) {
arrow.style.transform = `rotate(${angleFrom0To360}deg)`;
}
});.arrow {
transition: transform .1s linear;
}вписать изображения большего размера, что бы разметка не ломалась
.inv-cell {
position: relative;
}
img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
}