Popper-core: Popper with transformed element

[Johann-S]

Hi @FezVrasta

I'm working to remove Tether dependency from Bootstrap (https://github.com/twbs/bootstrap/commits/v4-experimental-tooltip), and we have a unit test which check if the tooltip for a transformed element is correctly placed.
It seems it's not the case

CodePen demo

http://codepen.io/Johann-S/pen/JNPBrY

What is the expected behavior?

The 1 should be center

[FezVrasta]

Hi, unfortunately transformed elements aren't supported quite well at the moment. Right now I'm working on some internal refactoring to fix higher priorities bugs, but I'm open to PRs to improve support for this use case.

[FezVrasta]

To add some context, we already have a failing test (disabled for now) to test the functionality (in at least one specific context).

[Johann-S]

I'll follow the development of Popper to know when this issue will be fixed 👍

[FezVrasta]

May I know why do you need to support this case? Is it that common?

[Johann-S]

It's a historical test introduced in _v3.3.0_ (https://github.com/twbs/bootstrap/commit/24ae068f21bd619235dfed5b9218b5b83b815160) and if we choose Popper instead of Tether we have to ensure that everything will work the same way than before.

See the test : https://github.com/twbs/bootstrap/blob/v4-dev/js/tests/unit/tooltip.js#L734-L769

[FezVrasta]

I see, I was just curious to understand why is it so important to be inside the test suite. Maybe it's something that the Bootstrap's CSS itself makes use of or else. 🤔

[Johann-S]

No it's not in the Bootstrap's CSS itself, but it something folks use.

I've finished my work to integrate Popper to Bootstrap and everything work fine, but not this test 😢

[FezVrasta]

Right now I'm stuck on https://github.com/FezVrasta/popper.js/pull/201#issuecomment-293559345

Any help to proceed in this direction will speed up the work needed to start working on #202.

• Edit:
  Looks like I found a way, now I have to fix two failing tests (#188 and #171) and then I can focus on this.

• Edit 2:

  171 has been fixed, I'm stabilizing the test suite on Travis, then I'll work on #188 and then I'll jump on this (#202)

[FezVrasta]

Your issue has been fixed, if the CI pass I expect to release a pre release, let you try it and then release a new version with the fix.

[Johann-S]

Nice ! Thank you @FezVrasta

In my next PR for Bootstrap, Popper will be used for Tooltip, Popover and Dropdown
I'll /CC you for a review or ideas 👍

[FezVrasta]

Ok great!

Please install the latest pre release with popper.js@next and let me know if it works for you. I'll wait your reply to publish it as stable.

[Johann-S]

I updated my CodePen (http://codepen.io/Johann-S/pen/JNPBrY) but it seems better but not centered totally

(Used this file : https://unpkg.com/[email protected])

[FezVrasta]

That's something I noticed happens only in CodePen, I'm not sure what happens there 🤔

I have the exact same test in the Popper test suite and it works flawlessly there.

[Johann-S]

Same not on CodePen :

[FezVrasta]

Ops, yes, looks like I fucked up the test. Sorry.

[FezVrasta]

So, I'm having some problems computing the scrollbar presence in transformed elements... If you have ideas please write them down here. The interested function is getBoundingClientRect.

[Johann-S]

I made a CodePen with an exemple of Tether on a transformed element : http://codepen.io/Johann-S/pen/GmgyYG

Maybe it can help you

[FezVrasta]

Thank you, unluckily it doesn't help because their logic is very basic and doesn't take in account a lot of variables. Btw I'm on it, expect a fix in few minutes.

[FezVrasta]

Please try [email protected], again, on CodePen there's a small offset, but on my tests not (this time for real 🙂)

If you understand why CodePen behaves differently I can fix it.

[FezVrasta]

Update, figured out the problem. My tests live in a wrapping div, without it I get the same bug.

I'm working on it.

https://codepen.io/FezVrasta/pen/MmYrNK

[Johann-S]

Seems better 👍 but a bit too much at the left (http://codepen.io/Johann-S/pen/JNPBrY)

[FezVrasta]

So, this is my test:
https://codepen.io/FezVrasta/pen/wdByGL?editors=0010

I don't get why here everything works fine, and in your codepen it doesn't..

Update, the order matters, fixing it.

[FezVrasta]

Fixed: https://codepen.io/FezVrasta/pen/oWgEpP

[FezVrasta]

You can use 1.5.1

[Johann-S]

Thank you @FezVrasta 👍 My test on Bootstrap still failed but what I see is much much better thanks to you

[FezVrasta]

Make sure it addresses decimal pixels, my tests use a custom toBeApprox assertion to make sure they don't fail if the position is just few decimals off.

[Johann-S]

Thank you I'll check that 👍
Do you know when a minified version of 1.5.1 will be available ?

[FezVrasta]

It's already available:
https://unpkg.com/[email protected]/dist/popper.min.js
https://unpkg.com/[email protected]/dist/popper.es5.min.js