Tab numbers position problem at some zoom levels

[thoun]

Your environment

• Version used: develop / demo on the website
• Platform used: JavaScript
• Rendering engine used: SVG
• Browser Name and Version: Chrome 86 & Firefox too
• Operating System and version (desktop or mobile): Windows 10
• Link to your project: visible on https://alphatab.net/ demo page

Expected Results

Numbers are vertically centered to line on every zoom level

Observed Results

numbers are not aligned at 75% (ok with 50% and 90%)

Steps to Reproduce (for bugs)

Open https://alphatab.net/ and select 75% zoom

Possible Solution

No solution yet. I might try a MR if I find tome to look deeper to this bug.

[Danielku15]

The issue likely comes from the way the numbers are vertically aligned. To maintain compatibility with IE I had to change the way texts are vertically aligned. Instead of the old dominant-baseline="middle" or dominant-baseline="hanging" the centering works via dy="0.5ex" or dy="1.25ex".

With the latest market changes it might be worth reconsidering again the IE support and drop it. Bootstrap 5 will drop support, Microsoft will drop support in August 2021 for their M365 apps, Wordpress is considering it. I opened a discussion to find out if we could drop it.

Until then we either are able to solve it using the existing ex units or we could try to add some browser detection to use dx units only for IE.

[thoun]

thanks for the correction !