The vh-check's discuss from hiswe

@supports not working on iOS 9.3.2?

My test case isn't calculating?

min-height: calc(98vh);@supports (height: var(--vh-offset)) {min-height: calc(98vh - var(--vh-offset));background: red;};

(@supports and its styles are crossed out in the Web Inspector. (background:red is for debugging)).

Doesn't seem to work on Iphone X

HI, We implemented vh-check in our webapp and tried it on iphone 8 and iphone X. It seems to work on iphone8 Safari but on iphoneX the height doesnt seem to adjust. I am not very familiar with the js used here but the fact that we are seeing it work on iphone8 tells me that we have implemented it correctly on our side. Any ideas why iphoneX is behaving differently?

DOC – add a mention of the CSS fallback

usefullness check

Hello,

Very useful script, but does line 40 should exist?
I guess it says to return nothing when offset is 0, but CSS expects some value and fails when there isn't any.
I got it working by deleting 'usefullness check'...

Get if the bottom bar is opened or closed

Hello, there's a way to check if the bottom bar is opened or closed based on scroll event?

Thank you!

All iphone phones with full screen cannot use this set of plug-ins.

All iphone phones with full screen cannot use this set of plug-ins.（With a gesture bar.）

Help: How can I use it with sass or vue?

I feel like I'm dumb.. I even asked it on StackOverflow but had no luck.

How would you use this when you are using sass/scss or vue?

Let us say I have this:

<style>
	:root {
	  --vh-offset: 0px;
	  --vh: 1vh;
	}
	.f-body #app{
		min-height: calc(100vh - var(--vh-offset));
	}
</style>

it always compiles to min-height: calc(100vh - 0px));

Because of this, the offset from javascript cannot work.

Thank you for reading/helping!

NPM – shouldn't have .vscode folder published on npm

IE11 - Object doesn't support property or method 'assign'

Just tried to upgrade from 1.1.3 to 2.0.1 but get the following error in IE 11.

should allow another way of computing the size

https://css-tricks.com/the-trick-to-viewport-units-on-mobile/

updateOnTouch only works when i touch again

Hi,

When i touch and drag first time, nothing happens... But when i touch and drag again, updateOnTouch works fine.

Have some way to make updateOnTouch works more fast?

gap doesn't reevaluate on scroll

On iPad tabs auto-hide when scrolling.
And so the gap will reduce ¬_¬'

root object in factory is undefined

Hi There,

Thanks for the great script. I Tried to use it in normal js environment without CommonJS / RequireJS. If I do so, I get an exception at line 7 ( root.vhCheck = factory(); )

"Factory is undefined"

Any idea, what I am doing wrong?

Does not work in iOS Chrome

Not working for iOS Chrome 74.0.3729.155.

This is because window.innerHeight has not been updated when an orientationchange event occurs. There is a workaround below, but I'd like to see it implemented in the library.

Workaround:

var test = vhCheck({
  onUpdate: (obj: any) => {
    orientationChanged().then(() => {
      const cssVarName = "vh-offset";
      const sizes = my.vhCheck.recompute();
      document.documentElement.style.setProperty(`--${cssVarName}`, `${sizes.value}px`);
    });
  }
});

See this for the orientationChanged function: https://stackoverflow.com/a/44579732

Not working on new chrome ios

Hey, just found this a few days and think it's great and solves a very annoying problem. However it seems to not be working on the newly updated google chrome V69.0.3497.105 for ios

fix documentation

#2

Does not work correctly in a PWA standalone web app

When having a PWA standalone app (display property value is standalone in manifest.json as written in here https://developer.mozilla.org/en-US/docs/Web/Manifest/display) then this library does not work as expected - since address bar does not exist then things are calculated incorrectly.

Publish actual code to NPM

Although (at least some) earlier versions published to NPM include the actual library, the latest (v1.1.2) doesn't appear to contain the library itself (no dist or src folders). Can you please publish a new version which includes the code, so that npm i vh-check will result in a usable version being installed?

Issues with TypeScript

Issue 1:
In TypeScript,
import vhCheck from "vh-check";

Will result in the error:
Could not find a declaration file for module 'vh-check'.

Adding the following in package.json will resolve the issue:
"typings": "dist/vh-check.d.ts",

Issue 2:
Compiling the app with vh-check will result in the error:

ERROR in xxx/node_modules/vh-check/dist/vh-check-types.d.ts
A rest parameter must be of an array type.
> 1 | export declare type Callback = (...arg: any) => void;

Modifying the first line of vh-check-types.d.ts as below fixes the issue:
export declare type Callback = (arg: any[]) => void;

Versions:
[email protected]
[email protected]

Don't write <style> tag

document.documentElement.style.setProperty(--${this.name}, this.value + 'px');

Bottom gap on mobile Firefox

I’m testing the mobile demo site on Firefox for iOS on a iPhone XR and I notice a bottom gap (see the black bar).

Docs: bind boolean value

https://github.com/Hiswe/vh-check#bind

There is default: find. Instead should be default: true

as find is not a boolean.

:root {
  --vh-offset: 0px;
}
main {
  min-height: calc(100vh);
  @supports (height: var(--vh-offset)) {
    min-height: calc(100vh - var(--vh-offset));
  }
}

but it seems like it should work just as well without @supports:

:root {
  --vh-offset: 0px;
}
main {
  min-height: calc(100vh);
  min-height: calc(100vh - var(--vh-offset));
}

If var() is not supported, that second value will be ignored, leaving you with the first 100vh value.
If var() is supported, but vh-offset isn't needed, it will be set to 0px still, and have no effect.

hiswe / vh-check Goto Github PK

vh-check's Issues

Recommend Projects

Recommend Topics

Recommend Org