diff --git a/src/static/js/tutorial.js b/src/static/js/tutorial.js index 87279a0..9673c8b 100644 --- a/src/static/js/tutorial.js +++ b/src/static/js/tutorial.js @@ -1495,15 +1495,28 @@ const Tutorial = { // Sichtbar machen bubble.classList.add('visible'); - // Sicherheitscheck: Bubble nicht unter Viewport-Rand + // Sicherheitscheck: Bubble komplett im sichtbaren Bereich halten var self = this; requestAnimationFrame(function() { var bRect = bubble.getBoundingClientRect(); var vHeight = window.innerHeight; - if (bRect.bottom > vHeight - 8) { - var shift = bRect.bottom - vHeight + 16; - var currentTop = parseFloat(bubble.style.top) || 0; + var currentTop = parseFloat(bubble.style.top) || 0; + // Transform beruecksichtigen (translateY(-100%) bei top-Position) + var transform = bubble.style.transform || ''; + var actualTop = bRect.top; + var actualBottom = bRect.bottom; + // Unten abgeschnitten + if (actualBottom > vHeight - 8) { + var shift = actualBottom - vHeight + 16; bubble.style.top = (currentTop - shift) + 'px'; + bubble.style.transform = transform.replace('translateY(-100%)', ''); + } + // Oben abgeschnitten + bRect = bubble.getBoundingClientRect(); + if (bRect.top < 8) { + currentTop = parseFloat(bubble.style.top) || 0; + bubble.style.top = (currentTop + (8 - bRect.top)) + 'px'; + bubble.style.transform = bubble.style.transform.replace('translateY(-100%)', ''); } }); },