applying the backdrop is slow

[pprabhu3430]

I have a couple of simple steps. I go from step 1 to step 2. I injected tourConfig into the angular controller controlling the view where the tour steps are configured. I overrode the backDrop to be true.

When the first step launches everything is good. But when you go from step 1 to step 2, the bacdrop dissappears for a second. The second step already has launched. And then the backdrop appears again. It almost seems like there is some type of calculation that occurs after which the backdrop divs are added to the dom. This calculation appears to take a solid half a second or so..so you can see the backdrop dissappear and appear.

Please let me know if this is a known issue or if i am doing something wrong.

Markup

<tour step="currentStep">
    <div class="item" style="text-align: right">
        <img ng-src={{exprecsrc}} ng-hide = "exprecsrc == ''" style="text-align: left; margin: 5px;">
        <a class="button button-icon icon ion-ios-upload positive" ng-click="photoOptions()" ng-hide = "exprecsrc != ''"
        tourtip="Click here to upload a photo"
            tourtip-step="1"
            tourtip-next-label="Next"
            tourtip-placement="left"
            tourtip-offset="60"></a> 
        <a class="button button-icon icon ion-close-circled assertive" ng-click="deletePhoto()" ng-hide="exprecsrc == ''" ></a> 
    </div>

    <button class="button button-block  button-positive" ng-click="submitExpense()" 
    tourtip="Click the submit button to upload your receipt to Verian"
            tourtip-step="2"
            tourtip-next-label="Next"
            tourtip-placement="bottom"
            tourtip-offset="60">Submit Expense</button>

    <button ng-click="currentStep=1; openTour()" class="button button-small button-positive">Take Tour</button>
</tour>

JavaSCript code in the controller.

// The tourconfig must be injected and the backdrop set on it. tourConfig.backDrop = true;

Thanks Pramod

[nicolac18]

+1

[ericnishio]

+1

Jumping between steps momentarily spawns a duplicate <div class="tour-backdrop"> element which darkens the backdrop for a second. Here's a temporary CSS workaround:

.tour-backdrop ~ .tour-backdrop {
  display: none;
}

[danidev]

I have the same issue and the workaround by ericnishio doesn't work.