Fixed header glitching on scrolldown
BryanKuiper opened this issue · 18 comments
Hi, I noticed you updated to 3.2.0 today.
Unfortunately the menu starts glitching when I scroll down.
When I downgrade back to 3.1.3, the glitching does not happen anymore.
I am using the menu with a threshold. As soon as it reaches that threshold it stops glitching.
Could you please look into it?
I will check the bug.
Thanks for the report!
@BryanKuiper
I corrected it and incorporated it into the master.
Can you download the package from GitHub and see it in your environment?
@BryanKuiper
I corrected it and incorporated it into the master.
Can you download the package from GitHub and see it in your environment?
Thanks, I will take a look at it asap!
@BryanKuiper
I corrected it and incorporated it into the master.
Can you download the package from GitHub and see it in your environment?Thanks, I will take a look at it asap!
Hi, I noticed that the npmjs version is still at 3.2.0, so I am not sure how to get the latest version.
npm publish and released v3.2.2. Please update below!
` $ yarn upgrade vue-fixed-header `
Installed the update and everything works fine now. Thanks!
Hi, I have tested your latest version on multiple devices and browsers now and it works fine for most of them except for Safari and IE11.
I think I might be able to fix the header for Safari through css since it seems to be related to iOS devices handling "position: fixed". (The header does not scroll along at all)
In IE11 on the other hand, it is still glitching. Could you please look into this?
Kind regards
@BryanKuiper
Please send a codesandbox URL that causes problems with IE11 for investigation.
@BryanKuiper
Please send a codesandbox URL that causes problems with IE11 for investigation.
I will send a minimal sandbox asap.
@BryanKuiper
thanks!
@BryanKuiper
thanks!
I started with setting up a simple codesandbox but it turns out that codesandbox itself has issues running on IE11. So, instead can I send you a small repo, for you to clone? It will run vue on IE11 and I will add vue-fixed-header.
I was investigating this glitch and I discover that IE 11 doesn't use height with decimals...
currentScrollPos this.lastScrollTop
IE 208 208
Chrome 380 378.3999938964844
So, I think I resolved this glitch using ">=" operator on position comparisons.Could you test this fork?
or check this pr #116
Thanks, I will test it asap
I was investigating this glitch and I discover that IE 11 doesn't use height with decimals...
currentScrollPos this.lastScrollTop
IE 208 208
Chrome 380 378.3999938964844
So, I think I resolved this glitch using ">=" operator on position comparisons.
Could you test this fork?
or check this pr #116Thanks, I will test it asap
Hi,
I tried installing your fork with npm:
npm install derevandal/vue-fixed-header#fix/@changeOnHideScrollDown
but it gives me only a package.json, readme.md, license and changelog.md files in my node_modules. I believe I should be able to install the fork in my project in such a way, but it does not seem to work. Do you have any ideas on how to fix this or what would you suggest to be a better alternative?
Oh, sorry... I don't have experience with publishing modules.
So, I recommend you use npm link to test locally.
Oh, sorry... I don't have experience with publishing modules.
So, I recommend you usenpm linkto test locally.
I tried using npm link as followed:
git clone <your fork>
git checkout -b <your branch>
npm link (in the root of your fork)
npm link vue-fixed-header (in my own project)
I do see your fork as a node_module in my project, but using import FixedHeader from "vue-fixed-header"; does not work. Also, the node_module does not seem to be a library in my project at this point (no lib folder), so maybe I am doing something wrong. Any idea what I can do about it? I have never done this before.
Did you build before linking? Em seg, 22 de abr de 2019 às 12:41, BryanKuiper notifications@github.com escreveu:
…
Oh, sorry... I don't have experience with publishing modules. So, I recommend you use npm link to test locally. I tried using npm link as followed: git clone git checkout -b npm link (in the root of your fork) npm link vue-fixed-header (in my own project) I do see your fork as a node_module in my project, but using import FixedHeader from "vue-fixed-header"; does not work. Also, the node_module does not seem to be a library in my project at this point (no lib folder), so maybe I am doing something wrong. Any idea what I can do about it? I have never done this before. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#105 (comment)>, or mute the thread https://github.com/notifications/unsubscribe-auth/AAKHIXDD2V2QAMC4772K7SDPRXMB5ANCNFSM4HDXIJWA .
-- Atenciosamente, André Van Dal
I thought I did, but I overlooked the error that the build failed because it could not find certain dependencies:
These dependencies were not found:
* core-js/modules/es6.array.filter in ./src/components/vue-fixed-header.tsx
* core-js/modules/es6.array.map in ./src/components/vue-fixed-header.tsx
* core-js/modules/es6.array.reduce in ./src/components/vue-fixed-header.tsx
* core-js/modules/es6.number.constructor in ./src/components/vue-fixed-header.tsx
* core-js/modules/es6.regexp.split in ./src/components/vue-fixed-header.tsx
Simply installing them or installing core-js does not seem to work. Perhaps I am running different versions of dependencies on my local machine, so I am not sure what to do at this point.
I already tried removed node_modules and package-lock.json without success.