Overlay height not full when content is harger than 100vh

[zhuhang-jasper]

🐛 Bug Report

Just like others reported before, the overlay does not take up full screen. Obvious when the item is located at bottom of the page and requires scrollling.

To Reproduce

Steps to reproduce the behavior:

html body css:
  margin: 0;
  min-width: 320px;
  padding: 0;
  width: 100%;
  height: 100%;
  background-color: #f9f9f9;

joyride styles:
  overlay: {
    background: "#000000",
    opacity: "70%",
  },

1. point the step to a UI node that is located somewhere bottom of the page.
2. when joyride jumps to it, u will see portion of screen does not have overlay.
3. you can try simulate mobile view in google chrome, that makes problem more obvious.

Expected behavior

Overlay should take up whole screen. (eg: position: fixed)

  System:
    OS: Windows 10 10.0.19045
    CPU: (20) x64 12th Gen Intel(R) Core(TM) i7-12800H
    Memory: 13.49 GB / 31.67 GB
  Binaries:
    Node: 20.13.1 - C:\Program Files\nodejs\node.EXE
    npm: 10.5.2 - C:\Program Files\nodejs\npm.CMD
    pnpm: 8.15.5 - C:\Portable\pnpm\pnpm.CMD
  npmPackages:
    react-joyride: ^2.8.2 => 2.8.2

[gilbarbara]

Hey @zhuhang-jasper

As mentioned in the issue template...

Link to repl or repo (highly encouraged)

Please provide a https://codesandbox.io/ demo or similar. Issues without a reproduction link are likely to stall.

[elmehdielhamdi]

Hello!

I have the same issue, since I have some data that might be loaded after the tour had started. I made a sandbox with an item that loads after the tour starts using setTimeout. If you scroll down after the red div has loaded you'll see that the overlay doesn't fill the full page height. Hope this helps, and thank you very much for this package!

[gilbarbara]

Hey @elmehdielhamdi

Your case is different. You are rendering an element after the Overlay has been rendered. The Overlay listens to window resize events to re-evaluate its dimensions, but rendering another element doesn't trigger it. For this particular case, add a window.dispatchEvent(new Event("resize")); inside your setTimeout to fix it.

[gilbarbara]

@elmehdielhamdi Also, remove the overlay height style since 100% won't work for long pages.

[lalong13]

@gilbarbara I noticed this overlay height issue as well on Chrome (MacOS Sonoma). For Chrome, if you use scrollHeight instead of offsetHeight it should work again.

https://stackoverflow.com/questions/1145850/how-to-get-height-of-entire-document-with-javascript The simplest way to get correct height is to get all height values found on document, or documentElement, and use the highest one. This is basically what jQuery does:

var body = document.body,
    html = document.documentElement;

var height = Math.max( body.scrollHeight, body.offsetHeight, 
                       html.clientHeight, html.scrollHeight, html.offsetHeight );

[gilbarbara]

I changed the way the height is calculated in v2.9.0 Please check it out.