react-waypoint: topOffset not working

I’m trying to trigger onEnter at a certain distance from the top but they trigger on the “edge” each and every time.

I’ve tried topOffset=“15%” topOffset={50} etc.

The waypoint containing div has position: relative and that div’s container has this.

position: absolute;
perspective: 300px;
width: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: auto

I have a page that is divided in “slides” and the next slide is already slightly visible by making each slide have a height of 98vh. Unfortunately, this triggers the waypoint for the next slide automatically, which is what I’m trying to avoid by using topOffset.

Here’s some of the debug output with a topOffset of 15%.

["waypoint top", 0]
["waypoint bottom", 328.453125]
["scrollableAncestor height", 242]
["scrollableAncestor scrollTop", 0]
["currentPosition", "inside"]
["previousPosition", "inside"]
["waypoint top", 328.453125]
["waypoint bottom", 1234.453125]
["scrollableAncestor height", 242]
["scrollableAncestor scrollTop", 0]
["currentPosition", "below"]
["previousPosition", undefined]
["waypoint top", 1234.453125]
["waypoint bottom", 1764.453125]
["scrollableAncestor height", 242]
["scrollableAncestor scrollTop", 0]
["currentPosition", "below"]
["previousPosition", undefined]
["waypoint top", 1764.453125]
["waypoint bottom", 2449.03125]
["scrollableAncestor height", 242]
["scrollableAncestor scrollTop", 0]
["currentPosition", "below"]
["previousPosition", undefined]

and without a topOffset

["waypoint top", 0]
["waypoint bottom", 328.453125]
["scrollableAncestor height", 242]
["scrollableAncestor scrollTop", 0]
["currentPosition", "inside"]
["previousPosition", "inside"]
["waypoint top", 328.453125]
["waypoint bottom", 1234.453125]
["scrollableAncestor height", 242]
["scrollableAncestor scrollTop", 0]
["currentPosition", "below"]
["previousPosition", undefined]
["waypoint top", 1234.453125]
["waypoint bottom", 1764.453125]
["scrollableAncestor height", 242]
["scrollableAncestor scrollTop", 0]
["currentPosition", "below"]
["previousPosition", undefined]
["waypoint top", 1764.453125]
["waypoint bottom", 2287.03125]
["scrollableAncestor height", 242]
["scrollableAncestor scrollTop", 0]
["currentPosition", "below"]
["previousPosition", undefined]
["waypoint top", 2287.03125]
["waypoint bottom", 2529.03125]
["scrollableAncestor height", 242]
["scrollableAncestor scrollTop", 0]
["currentPosition", "below"]
["previousPosition", undefined]