empty space when dragging it - sass

Question

I have a simple custom splitter that works great. However, I have a little issue:
The first time I drag the splitter down it adds an empty space, after that I can drag with it with no problem (up or down). Can anyone tell me what may be causing the extra space issue? Thanks a lot in advance!
Here's the code:
PLUNKER
#HostListener('document:mousemove', ['$event'])
onMouseMove(event: MouseEvent) {
if (!this.grabber) {
return;
}
this.resizer(event.clientY - this.oldY);
this.oldY = event.clientY;
}

Answer 1

First, you should consider using clientHeight instead of offsetHeight because CSS height is calculated as clientHeight minus CSS paddings* while offsetHeight also includes borders height
clientHeight = content height + paddings
offsetHeight = clientHeight + borders height
Now you have two options
1) Use clientHeight together with box-sizing: border-box; (paddings will be included in css height)
ts
ngOnInit() {
this.height = parseInt(this.el.nativeElement.parentNode.clientHeight);
}
css
.textarea {
box-sizing: border-box;
}
Example
2) Use content height
ngOnInit() {
const elem = this.el.nativeElement.parentNode;
const computedStyle = getComputedStyle(elem);
const paddingsHeight = parseFloat(computedStyle.paddingTop)
+ parseFloat(computedStyle.paddingBottom)
this.height = parseFloat(elem.clientHeight) - paddingsHeight;
}
Example