From c7af4af368a522cc06c5f7b06d24678b256d3b23 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20Jakes=CC=8C?= Date: Sat, 4 Aug 2018 19:24:27 +0200 Subject: [PATCH] Fix intro.js positioning bug on 'position: fixed' elements Intro.js has a bug causing tooltips appear in wrong places (or out of sceen) when using 'position: fixed' on target element and not being scrolled to top. This fixes the bug taking window scroll into account. The only place where it can be seen is during the highlight animation when not scrolled to top, which is not serious and not very likely to be seen. [MAILPOET-1446] --- assets/js/src/intro.jsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/assets/js/src/intro.jsx b/assets/js/src/intro.jsx index 7f4638b7e8..0a1adb2e8c 100644 --- a/assets/js/src/intro.jsx +++ b/assets/js/src/intro.jsx @@ -38,8 +38,16 @@ function Intro() { tooltipPosition: 'auto', }); - intro.onafterchange(() => { + intro.onafterchange((targetElement) => { document.body.classList.add('mailpoet-intro-active'); + + // fix for intro.js positioning bug on 'position: fixed' elements + if (getComputedStyle(targetElement).getPropertyValue('position') === 'fixed') { + const helperLayer = document.querySelector('.introjs-helperLayer'); + const referenceLayer = document.querySelector('.introjs-tooltipReferenceLayer'); + referenceLayer.style.top = `${parseInt(referenceLayer.style.top, 10) - pageYOffset}px`; + helperLayer.style.top = `${parseInt(helperLayer.style.top, 10) - pageYOffset}px`; + } }); intro.onexit(() => {