Misbehaviour when applying box-shadow to arrow

[willdochnur]

Version: "angular-shepherd": "^14.0.0"

Hi there, thank you for this nice library. I want to apply css box-shadow to arrow by custom styling but it seems like it is not possible for me. I played around with positioning and z-index, but nothing seemed to work.

---

attachTo: { on: "bottom" } works correctly

---

attachTo: { on: "right" } does not work correctly

---

attachTo: { on: "left" } does not work correctly

---

attachTo: { on: "top" } does not work correctly

---

.walkthroughs-custom.shepherd-element {
  -webkit-box-shadow: 0px 0px 10px 2px #00000033;
  box-shadow: 0px 0px 10px 2px #00000033;
}

.walkthroughs-custom .shepherd-arrow::before {
  background-color: #fff !important;
  -webkit-box-shadow: 0px 0px 10px 2px #00000033;
  box-shadow: 0px 0px 10px 2px #00000033;
}

I do always use attachTo: { on: "auto" } to let the library decide where to place the arrow and the info box. I did set up "top", "bottom", "left" and "right" just to demonstrate the misbehaviour.

Do you have a short code snippet which you can provide for this case, please? I think this is a common use case. Thanks.

[willdochnur]

I found the problem by myself. The shepherd element with the style class shepherd-content does not has any background color. I fixed it by adding background-color to it.

.walkthroughs-custom .shepherd-content {
  background-color: #fff;
}