Why the font size is unstable?

Only for mobile
Example
I want to make the text in the columns were placed in one line. Use ngFitText. The problem is that if in one column the text is short, for example 54, the font will be larger than in the other columns. It is necessary that the font was the same size in all columns. So I made a Directive that reads the font size in all columns, and puts on all the least of them.

.directive('equalFontSize', function($timeout, $window) {
 return {
 restrict: 'A',
 link: function(scope, element, attrs) {

 function run(noDebounceFlag) {
 let elems = document.querySelectorAll('[equal-font-size]');
 let font;
 let debounce = 0;

 if (!noDebounceFlag && attrs.hasOwnProperty('fittext')) {
 debounce += 1100;
}

removeOldCss(elems);

 $timeout(() => {
 if (attrs.equalFontSize === 'min') {
 font = getFontMin(elems);
}
 setFont(elems, font);
 }, debounce);
}

 getFontMin function(elems) {
 let fontMin = 1000;
 elems.forEach(element => {
 let style = window.getComputedStyle(element);
 let fontSize = parseInt(style.getPropertyValue('font-size'));

 if (fontSize < fontMin) {
 fontMin = fontSize;
}
});
 return fontMin;
}

 removeOldCss function(elems) {
 elems.forEach(element => {
 let classList = element.className.split(' ');
 classList.forEach(cssClass => {
 if (cssClass.includes("-fs-px")) {
angular.element(element).removeClass(cssClass);
}
});
});
}

 function setFont(elems, font) {
 let fontElem = document.querySelectorAll('#font')[0];
angular.element(fontElem).text(font);
 elems.forEach(element => {
angular.element(element).addClass(`-fs-px-${font}`);
});
}

run();

 window.addEventListener('resize', () => {
run(true);
});
}
};
 })


Why use classes instead of inline? Answer: mobile scrolling of triggered resize and so ngFitText each time to recalculate the font size. Since our class is interrupted by inline styles, then jumps in the size of the font will not be visible. In the test case this is not present, but in a real example, my Directive reads the fine print only if you change mode from portrait to landscape or Vice versa, but that's not the point.

The problem is that when you resize ngFitText is unstable and often sets the minimum font size. I can not understand why so
June 10th 19 at 15:27
0 answer

Find more questions by tags Adaptive designAngularJavaScript