Блог 
Oct 14, 2025
iOS‑Pointer курсор: архитектура, устойчивость и отладка
Разбор архитектуры: делегирование, фильтрация интерактивных элементов, сброс при навигации, исключение из ViewTransition, устойчивость к SSR/CSR.
Демонстрационный курсор включён метой:
definePageMeta({ iosPointer: true }).Почему делегирование
Компоненты Nuxt UI (например,
UBlogPost) содержат вложенные слои. Переходы между дочерними узлами без делегирования дают дребезг. Делегирование на документ + closest(SELECTOR) устраняют проблему.function isTrulyClickable(el: HTMLElement): boolean {
return !(el.tagName === 'A' && el.children.length === 1
&& el.children[0].tagName === 'SPAN'
&& el.children[0].classList.contains('absolute'))
}
Сброс состояния при навигации
router.afterEach(() => handleLeave()) гарантирует «чистый» курсор на новой странице, даже если pointerleave не успел сработать.Исключение из ViewTransition
[data-ios-cursor] { view-transition-name: none !important; }
Полный компонент и интеграция
<IosPointer :enabled="useRuntimeConfig().public.iosPointerEnabled && useRoute().meta.iosPointer !== false" blendMode="difference" />
/* см. полный вариант в руководстве A */
Отладка
При уходе указателя за пределы окна убеждаться, что обработчики проверяют типы:
if (!(e.target instanceof HTMLElement)) return.Для плавности держать анимационный цикл в одном
requestAnimationFrame и не смешивать с CSS-трансишнами позиции.::badge{label="Nuxt 4" color="primary"}::badge{label="Nuxt UI v4" color="success"}::badge{label="motion-v@1.7.2"}