Popper-core: When Popup contains large 'border-radius' then Arrow is shown at incorrectly position

[nashtechdev01]

CodePen demo

https://jsfiddle.net/bu20spxa/10/

Steps to reproduce the problem

1. current border-radius: 20px
2. change border-radius: 50%

What is the expected behavior?

If popup has border-radius then arrow should be stayed far than border radius area.
It should look like as:
https://jsfiddle.net/bu20spxa/15/

What went wrong?

The position of arrow with placements: Shifted popper top on end and Shifted popper bottom showed at border radius area.

Any other comments?

[FezVrasta]

You can manually add some CSS margin to your arrows to avoid this problem. I don't think the library will ever include an automatic detection because it would be very tricky

[timhunt]

@FezVrasta it may not have been clear, but Thinh Pham Tien, one of the Nash Tech developers, has been looking at this, and working on a patch. Although it is a little bit tricky, we have some code that works, and we were planning to submit a Pull request, if you would be intersted.

Would you be interested to re-open this, and look at our patch? If not, we will follow your suggestion to work-around this with CSS margins on the arrow. Thanks.

[FezVrasta]

How do you detect changes in the border-radius property? The change can come from several different sources of mutation, not all of them are detectable by JS.

[timhunt]

At the moment, we are just looking at the arrow() function, which seems to be where it computes the position that the arrow should go (https://github.com/FezVrasta/popper.js/blob/789d60230b7fedbc9f016659c8c1a191475e41e8/packages/popper/src/modifiers/arrow.js#L51). We are extending the logic there, to also consider border-radius.

Our (limited) understanding of the code is that was the only bit we would need to change. Are we missing something?

(Thanks for you speedy responses :-))

[FezVrasta]

I think it would make sense as a custom modifier, right now the arrow margin is intentionally left to the user because of performance reasons and matter of preference of the final result.

To get the border-radius values you would need to query the DOM and get back the computed styles, which is actually quite expensive.

A custom modifier could be added and injected just after the built-in arrow modifier to alter its offset in the way you desire.

I hope you understand the need to keep the core of the library specialized and lean to avoid to ship a too heavy bundle to the majority of the users.

[timhunt]

I completely understand. (I now wish we had discussed this with you sooner.) I had not realised it might be possible to implement this without changes to the Popper code. Thanks for your time.

[ConneXNL]

@timhunt / @FezVrasta / @nashtechdev01

Is there any solution to this nowadays?
For example a setting that could be used to keep the arrow at least X away from the sides?