backdrop doesn't work on rotated elements

[Invincibear]

Hey thanks for updating bootstrap tour, saved my butt from spending countless hours troubleshooting why it isn't working with bootstrap 4....

So I ran into an issue where the backdrop isn't accurately drawn when factoring in rotated elements. In my case, I have a <ul> set to be horizontal, and then a transform: rotate(90) to make it vertical. When I set the tour element to be the <ul>, it still treats it as if it were horizontal.

This is best illustrated by here: https://jsfiddle.net/Invincibear/1Lung9bj/25/

[IGreatlyDislikeJavascript]

Thanks for the report. This is an interesting one, I never considered handling rotated elements and original Tour doesn't support them either. I need to think how to fix this because it's not just the background that's affected, preventInteraction will suffer from the same problem.

Please leave this one with me, I don't have an immediate solution but will work on it.

In the meantime, perhaps a temporary option is to overlay a non-rotated div over your rotated elements (because I assume you "know where they are"), and then set that div as the tour element.

[thenewbeat]

A simple solution for the developer would be to wrap the rotated element in a div, and place the Tour step on the wrap div.

[Invincibear]

Tried using the wrapper idea but the same thing happens. I think all that's needed here is to detect if a rotate happens, and then translate the coordinates to draw the correct rectangle. Sounds simple in theory.... but we all know how that goes lol

[IGreatlyDislikeJavascript]

I've been looking at this today, it's going to be a tough one to solve. First there cross browser compatibility issues in how to get the rotation/transform values for an element.

Second, the calculations to correctly position backdrop divs become problematic , because tourist code will have to emulate the transformation on the element to find the resulting position. And, if the rotation isn't at right angles (i.e.divisible by 90 degrees), positioning is even more challenging.

So I'm thinking of an initial function to try and detect rotation, combined with a callback function option for a tour step to return the degrees of rotation directly in case the detection fails.

I may implement the callback option first to give you an interim solution. Leave it with me!

[IGreatlyDislikeJavascript]

We're currently working on a significant change to how the backdrop is managed:

https://github.com/IGreatlyDislikeJavascript/bootstrap-tourist/pull/24

I'm pretty sure that once we have the new backdrop approach working and stable, fixing this rotated element issue will be fairly straightforward.

Thanks for your patience!