Alexander/homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: PiP show/hide on resize and skip observer at page top
All checks were successful
CI / update (push) Successful in 1m28s
Details

Browse Source 
- Resize handler calls pip.show()/hide() instead of just reposition(),
  fixing PiP not appearing when resizing from desktop to mobile
- IntersectionObserver skips all updates when scrollY < 50, preventing
  stale activeSection from re-scrolling SVG after jump-to-top
This commit is contained in:
Alexander Bocken
2026-02-09 14:32:32 +01:00
parent 6182b8f943
commit bf3014337e
1 changed files with 10 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/routes/[faithLang=faithLang]/[rosary=rosaryLang]/+page.svelte
View File

@@ -547,10 +547,13 @@ onMount(() => {
// Now allow saving to localStorage
hasLoadedFromStorage = true;
// PiP resize handler
// PiP resize handler — show/hide when crossing the breakpoint
const onPipResize = () => {
if (rosaryPipEl && isMobilePip() && mysteryPipSrc) {
pip.reposition();
if (!rosaryPipEl) return;
if (isMobilePip() && mysteryPipSrc) {
pip.show(rosaryPipEl);
} else if (!isMobilePip()) {
pip.hide();
}
};
window.addEventListener('resize', onPipResize);
@@ -658,40 +661,13 @@ onMount(() => {
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting && scrollLock !== 'svg' && scrollLock !== 'click') {
// Skip observer updates when at the top — handleWindowScroll handles this
const scrollY = window.scrollY || window.pageYOffset;
if (scrollY < 50) return;
const section = entry.target.dataset.section;
activeSection = section;
// Don't auto-scroll if we're at the absolute top of the page and viewing the first section
const scrollY = window.scrollY || window.pageYOffset;
if (scrollY < 50 && section === 'cross') {
// User is at the very top - don't trigger auto-scroll, just update SVG
if (svgContainer && sectionPositions[activeSection] !== undefined) {
const svg = svgContainer.querySelector('svg');
if (!svg) return;
const svgYPosition = sectionPositions[activeSection];
const viewBox = svg.viewBox.baseVal;
const svgHeight = svg.clientHeight;
const viewBoxHeight = viewBox.height;
// Get CSS transform scale (3.5 on mobile, 1 on desktop)
const computedStyle = window.getComputedStyle(svg);
const matrix = new DOMMatrix(computedStyle.transform);
const cssScale = matrix.a || 1;
// Convert SVG coordinates to pixel coordinates
const scale = (svgHeight / viewBoxHeight) * cssScale;
const pixelPosition = svgYPosition * scale;
// Position with some padding to show context above
const targetScroll = pixelPosition - 100;
setScrollLock('prayer');
smoothScrollElement(svgContainer, Math.max(0, targetScroll));
}
return; // Skip the page scroll
}
// Scroll SVG to keep active section visible at top
if (svgContainer && sectionPositions[activeSection] !== undefined) {
const svg = svgContainer.querySelector('svg');