Vertical height is wrong when Safari's bottom bar isn't present

[Michael]

Hi,

Thanks for creating this component! Its working fine when the bottom menu bar is present, but once you scroll it away, the height is not updated to the correct height.

For example:

[Yossi Shasho]

+1

[Michael Arvanitidis]

https://github.com/mvasin/react-div-100vh/blob/master/src/lib/getWindowHeight.js the code checks first for document.documentElement.clientHeight and then for window.innerHeight, both those values are the same when bottom bar is present, but when the bar disappears the values differ. window.innerHeight returns the correct value.

@mvasin would it be an idea to switch the statement in getWindowHeight()? That way iOS atleast will return correct value.

[Cole Peters]

Just encountered this issue as well. FWIW, for me it occurs when rotating the device (either a physical one or one in the simulator) to landscape and then back to portrait. Maybe we need a listener on device rotation to recompute?

[Michael Vasin]

Indeed, using window.innerHeight instead of document.documentElement.clientHeight seems to solve the issue. At also seem to resolve #14.

That's how it used to be from the beginning, and document.documentElement.clientHeight was introduced to address #22. But seems like it's not an ideal solution and we need to resort towards something like https://bugs.webkit.org/show_bug.cgi?id=170595#c5 (or perhaps #13 (comment)), maybe with some optimisations on top. We may also consider https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver.

[David Gross]

@mvasin is there an older release I can downgrade to that solves this Safari issue even if it reintroduces issue described in #22? This is crucial for an app I'm working on currently and I love the simplicity of this component.

[Michael Vasin]

Hi @blimpmason! According to the diff of #22, that should be version 0.3.4.

[Pitipat Srichairat]

What's the issue with window.innerHeight ?
In my project, window.innerHeight seems to return correct height when bottom bar isn't present compare to document.documentElement.clientHeight

[Sebastian Schiller]

I think I have this issue as well with iOS 15 and it's bottom bar.

The height itself is correct and my elements are positioned correctly, but when the bottom address bar disappears, there is empty space at the bottom (for instance when the user scrolls down).

[Hugo Licón]

I also started to have the same issue with iOS 15 @baba43, could someone find a fix for this bug?

[Michael Vasin]

Hi all,

I replaced document.documentElement.clientHeight || window.innerHeight with window.innerHeight in #74 and published it as react-div-100vh@0.7.0-beta.1. Can you try it out?

[Michael Vasin]

The above update is published under version 0.7.0.

[Patrik Toma]

Not quite working for me. On iOS 15 Safari when the browser UI gets minimized, even the window.innerHeight is giving a wrong number. I'm not sure what can be done about it though.

[Patrik Toma]

can see the gap at the bottom of the screen

[Michael Vasin]

Wow, that looks like contemporary art.

[Alex Cory]

Give this a shot. Seems to be working for me.

const getViewports = () => ({
  viewport: {
    width: Math.max(
      document.documentElement.clientWidth || 0,
      window.innerWidth || 0
    ),
    height: Math.max(
      document.documentElement.clientHeight || 0,
      window.innerHeight || 0
    )
  },
  visualViewport: {
    width: window.visualViewport.width,
    height: window.visualViewport.height
  }
})

const useVisualViewport = () => {
  const [state, setState] = useState(getViewports)
  useEffect(() => {
    const handleResize = () => setState(getViewports)
    window.visualViewport.addEventListener('resize', handleResize)
    return () =>
      window.visualViewport.removeEventListener('resize', handleResize)
  }, [])
  return state
}