Text rendered lower than in browser?

[Rhialto-com]

The first line was captured in browser.
The second line is from html2canvas-pro.

Yellow lines manually added to show the alignment issue.

Image is zoomed 200%

I'm coming from using html2canvas then tried html2canvas-pro after I found this post discussing the issue: niklasvh/html2canvas#2775 and Initially I though it could have been solved when I read this:

• vertical text alignment fix #3151 (92f6a33)

from version 1.5.5 but the issue remain in latest version.

The code for that line is this:

<td style="text-align: right; color: #fff;"><b>9</b><span style="color: #888;">&nbsp;<b>Tabs</b>&nbsp;in&nbsp;</span></td>
<td style="text-align: left; color: ${textColor}; font-size: ${fontSize - 6}px; padding: 3px 0px;"><span style="background-color: ${bgcolor}; border-radius: 4px; border: 1px solid ${textColor}; padding: 1px 0px;"><b>&nbsp;3D&nbsp;</b></span></td>

I spent 2 hours asking AI to help and trying different solutions like display: flex and align-items: center or specifying height and line-height until I found the thread above disscussing the issue.

Now, I'm far from a CSS specialist or anything but there is a comment in that discussion pointing to vanirvan/timpafafa@77c06e1, could it be a fix? I have no idea how to even test that code.

[kit91ka]

same issue, but the difference is more crucial. used old lib html2canvas it was OK, but when I replaced it with this one, I got this: