calc(100% + 0.5px)
. В зависимости от логики в дизайне значения меняются, но логика остается - добавляем к значениям в коде доли пикселя до тех пор, пока не начнет округляться нормально. Иногда, если там картинка, помогает font-size: 0
для контейнера картинки. Все это лютые костыли, и так оно не должно работать, но более толкового решения пока не наблюдается. Это баг браузера, который мы не контролируем. importScripts is not defined
не говорит о том, что файла не существует. Она говорит о том, что функции importScripts нет в том контексте, в котором все выполняется. В стандартном глобальном Window ее нет. В WorkerGlobalScope она есть. Нужно убедиться в том, в каком контексте выполняется ваш код. Что есть self в вашем коде. Тут многое зависит от того, как вы делаете свое приложение и как создаются эти воркеры (в некоторых фреймворках может своя локальная магия происходить). Есть неиллюзорная вероятность, что ваш код воркера загружается два раза. И запускается два раза. И первый раз он запускается в основном потоке, где self - это получается window. Если это так, то можно сделать запуск кода воркера из тупой проверки-заглушки, что-нибудь вроде:if (typeof importScripts === 'function') {
importScripts('......js');
// и все остальное тут
}
цифры мешают нажимать на места, а z-index изменить не получается
... MIME type (‘text/html’) is not Executable ...
... MIME type ('text/html') is not a supported stylesheet MIME type ...
--no-sandbox
при его запуске, или, что более безопасно, запустить его из-под обычного пользователя. - 'Error: <%= error.message $>'
+ 'Error: <%= error.message %>'
Плагин Dimensions замеряет расстояния через canvas. Реализация выглядит достаточно сложно...
scene.add(gltf.scene);
const model = new THREE.Mesh( loader, material );
scene.add(model);
курсор смещается внутри квадрата(нужно чтобы он оставался в центре)
// Там, где в двух местах есть работа с --x и --y
target.style.setProperty('--x', Math.floor(((e.clientX - rect.left) / rect.width * 100) * 100) / 100+'%');
target.style.setProperty('--y', Math.floor(((e.clientY - rect.top) / rect.height * 100) * 100) / 100+'%');
// нужна еще пара значений
target.style.setProperty('--new-x', e.clientX - rect.left + 'px');
target.style.setProperty('--new-y', e.clientY - rect.top + 'px');
.image-zoom-block {
/*
left: var(--x);
top: var(--y);
transform: translateX(calc(var(--x) * -1)) translateY(calc(var(--y) * -1));
*/
left: var(--new-x);
top: var(--new-y);
transform: translateX(-50%) translateY(-50%);
}
в голове есть идея высчитывать ширину и высоту контейнера кнопки, а после отслеживать само движение мыши, но не знаю правильно это или нет
Можно ли как то совместить эти события, чтобы и слайды листать, и кнопки в плеере нажимать?
<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', {});