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

[iMerica]

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.

[colepeters]

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?

[mvasin]

Indeed, using window.innerHeight instead of document.documentElement.clientHeight seems to solve the issue. At also seem to resolve https://github.com/mvasin/react-div-100vh/issues/14.

That's how it used to be from the beginning, and document.documentElement.clientHeight was introduced to address https://github.com/mvasin/react-div-100vh/pull/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 https://github.com/mvasin/react-div-100vh/issues/13#issuecomment-534639824), maybe with some optimisations on top. We may also consider https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver.

[blimpmason]

@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.

[mvasin]

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

[pitipatdop]

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

[baba43]

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-licon]

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

[mvasin]

Hi all,

I replaced document.documentElement.clientHeight || window.innerHeight with window.innerHeight in #74 and published it as [email protected]. Can you try it out?

[mvasin]

The above update is published under version 0.7.0.

[patotoma]

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.

[patotoma]

can see the gap at the bottom of the screen

[mvasin]

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
}