🐛 Fix initial scroll to top before scrolling to target

src/js/components/shepherd-element.svelte

@@ -127,6 +127,12 @@
     opacity: 1;
   }
 
+  .shepherd-element[data-popper-reference-hidden]:not(.shepherd-centered) {
+    visibility: hidden;
+    pointer-events: none;
+    opacity: 0;
+  }
+
   .shepherd-element, .shepherd-element *,
   .shepherd-element *:after,
   .shepherd-element *:before {

src/js/step.js

@@ -7,7 +7,6 @@ import ShepherdElement from './components/shepherd-element.svelte';
 
 // Polyfills
 import smoothscroll from 'smoothscroll-polyfill';
-
 smoothscroll.polyfill();
 
 /**
@@ -329,7 +328,6 @@ export class Step extends Evented {
     if (this.options.advanceOn) {
       bindAdvance(this);
     }
-
     setupTooltip(this);
   }
 
@@ -345,22 +343,22 @@ export class Step extends Evented {
 
     this.tour.modal.setupForStep(this);
     this._styleTargetElementForStep(this);
-
     this.el.hidden = false;
 
-    this.tooltip.update();
-
-    const content = this.shepherdElementComponent.getElement();
-    const target = this.target || document.body;
-    target.classList.add(`${this.classPrefix}shepherd-enabled`, `${this.classPrefix}shepherd-target`);
-    content.classList.add('shepherd-enabled');
-
+    // start scrolling to target before showing the step
     if (this.options.scrollTo) {
       setTimeout(() => {
         this._scrollTo(this.options.scrollTo);
       });
     }
 
+    this.el.hidden = false;
+
+    const content = this.shepherdElementComponent.getElement();
+    const target = this.target || document.body;
+    target.classList.add(`${this.classPrefix}shepherd-enabled`, `${this.classPrefix}shepherd-target`);
+    content.classList.add('shepherd-enabled');
+
     this.trigger('show');
     this.el.focus();
   }

src/js/utils/general.js

@@ -1,6 +1,57 @@
 import { createPopper } from '@popperjs/core';
 import { isString } from './type-check';
 import { makeCenteredPopper } from './popper-options';
+import getNodeName from '@popperjs/core/lib/dom-utils/getNodeName.js';
+import { isHTMLElement } from '@popperjs/core/lib/dom-utils/instanceOf.js';
+import applyStylesModifier from '@popperjs/core/lib/modifiers/applyStyles';
+
+function effectFixed({ state }) {
+  const initialStyles = {
+    position: 'absolute',
+    left: '0',
+    top: '0',
+    margin: '0'
+  };
+
+  Object.assign(state.elements.popper.style, initialStyles);
+
+  return () => {
+    Object.keys(state.elements).forEach((name) => {
+      const element = state.elements[name];
+      const styleProperties = Object.keys(
+        Object.prototype.hasOwnProperty.call(state.styles, name)
+          ? { ...state.styles[name] }
+          : initialStyles
+      );
+      const attributes = state.attributes[name] || {};
+
+      // Set all values to an empty string to unset them
+      const style = styleProperties.reduce(
+        (style, property) => ({
+          ...style,
+          [String(property)]: ''
+        }),
+        {}
+      );
+
+      // arrow is optional + virtual elements
+      if (!isHTMLElement(element) || !getNodeName(element)) {
+        return;
+      }
+
+      // Flow doesn't support to extend this property, but it's the most
+      // effective way to apply styles to an HTMLElement
+      // $FlowFixMe
+      Object.assign(element.style, style);
+
+      Object.keys(attributes).forEach((attribute) =>
+        element.removeAttribute(attribute)
+      );
+    });
+  };
+}
+// work around for default state values
+applyStylesModifier.effect = effectFixed;
 
 /**
  * Ensure class prefix ends in `-`
@@ -83,8 +134,9 @@ export function uuid() {
  */
 export function getPopperOptions(attachToOptions, step) {
   let popperOptions = {
-    // required to keep the Step in the viewport
     modifiers: [
+      applyStylesModifier,
+      // required to keep the Step in the viewport
       {
         name: 'preventOverflow',
         options: {

src/js/utils/popper-options.js

@@ -47,11 +47,10 @@ function _getCenteredStylePopperModifier() {
  */
 export function makeCenteredPopper(step) {
   const centeredStylePopperModifier = _getCenteredStylePopperModifier(step);
+  const content = step.shepherdElementComponent.getElement();
   let popperOptions = _makeCommonPopperOptions(step);
 
-  popperOptions.placement = 'top';
-  popperOptions.strategy = 'absolute';
-
+  content.classList.add('shepherd-centered');
   popperOptions = {
     ...popperOptions,
     modifiers: Array.from(new Set([...popperOptions.modifiers, ...centeredStylePopperModifier]))
@@ -62,6 +61,7 @@ export function makeCenteredPopper(step) {
 
 function _makeCommonPopperOptions() {
   const popperOptions = {
+    placement: 'top',
     strategy: 'fixed',
     modifiers: []
   };