Block Hero 11 Hotspot Alignment

Hello, I am using the “Hero 11” block on one of my pages (http://themes.semicolonweb.com/html/canvas/block-hero-11.html). The block appears about 1/2 of the way down the scroll of the page. We have tested it across browsers and it works great in almost every instance. However, we did encounter an issue inside of edge and safari. Upon initial page load everything loads correctly. However, if the user refreshes the browser sometimes the hotspots align to the top of the container (see photos). In other words, the browser is honoring the X parameter of the hotspot but not the Y upon refresh. Please let me know if you have any idea what could fix this. Much appreciated!