viewport units on mobile

[alonronin]

There is a problem with vh unit in chrome mobile browser:

See Css Trick Article on this:
https://css-tricks.com/the-trick-to-viewport-units-on-mobile/

Is there any way to fix it but to use h-full all over the place 😄?

[alonronin]

I cane across this https://dev.to/peiche/100vh-behavior-on-chrome-2hm8.

He suggest to use @supports in conjunction with a Chrome-specific browser hack:

.h-screen {
  @supports (-webkit-appearance:none) {
    .os-android & {
      min-height: calc(100vh - 56px);
    }
  }
}

[adamwathan]

I'd recommend using this PostCSS plugin to handle this:

https://github.com/postcss/postcss-100vh-fix

Closing since not planning to make any changes to Tailwind itself but that should help you out!

[Ali-Javanmardi]

This plugin depended to PostCSS8 and due to compatibility issue with vue.js 3 I had to install tailwindcss with PostCSS7-compat:
https://tailwindcss.com/docs/installation#post-css-7-compatibility-build

now I can not install that plugin.

Hope there is a compatibility version for the plugin with postcss7 or in a better way a compatibility with vue.js 3 and postcss8 :)

[astagi]

It works perfectly! I add for completeness that using TailwindCSS 2.0.1 with PostCSS 7 compatibility I had to install postcss-100vh-fix 0.1.1

yarn add -D postcss-100vh-fix@0.1.1

[andorfermichael]

@astagi how did you get it to work? Do I just need to add

        postcss: {
            // Add plugin names as key and arguments as value
            // Install them before as dependencies with npm or yarn
            plugins: {
                // Disable a plugin by passing false as value
                'postcss-100vh-fix': {},
                'postcss-viewport-height-correction': {}
            }
        }

to nuxt.config.js ?

I installed the plugin and added the code above, but it does not seem to change anything.

[astagi]

Hey @andorfermichael 👋

I created a simple Vue.js app with Vue CLI to show how to create a dark mode switch using TailwindCSS and Oruga. I included my plugins here

Here's my demo https://github.com/astagi/demo-tailwind-darkmode

And the preview: https://demo-tailwind-darkmode.netlify.app

Hope it helps!

[andorfermichael]

Thank you.

[simonswiss]

Moving this to discussions since at least two people are interested in this 👍

[ronateds]

in case someone is trying to fix this problem in next js or react, just add this code to _app.js or the file you're using on react

    //gets screen size - to fix mobile viewport height problem
    useEffect(() => {
      // only execute all the code below in client side
      if (typeof window !== 'undefined') {
        // Handler to call on window resize
        function handleResize() {
          let vh = window.innerHeight * 0.01
          document.documentElement.style.setProperty('--vh', `${vh}px`)
        }
  
        // Add event listener
        window.addEventListener("resize", handleResize);
  
        // Call handler right away so state gets updated with initial window size
        handleResize();
  
        // Remove event listener on cleanup
        return () => window.removeEventListener("resize", handleResize);
      }
    }, []);

and on tailwind.config.js:

    module.exports = {
      // ...
      theme: {
        // ...
        height: theme => ({
          auto: 'auto',
          ...theme('spacing'),
          full: '100%',
          screen: 'calc(var(--vh) * 100)',
        }),
        minHeight: theme => ({
          '0': '0',
          ...theme('spacing'),
          full: '100%',
          screen: 'calc(var(--vh) * 100)',
        }),
        // ...
      },
      // ...
    }

based on this solution for vue

[alonronin]

It's really useless and cannot be fixed as this is something that is fundamentally wrong with Chrome and other mobile browsers.

It will always create a flicker when after you scroll browser's header.

[ronateds]

yes, I'm having this flicker problem now, I've tried installing postcss-100vh-fix, but can't make it work

[Augustine-cudjoe]

All the solutions above didn't work for me. Someone should help me out. -webkit-fill-available, 100vh no results.