Javascript: Why the scrollHeight value is different in Chrome and Firefox browser?

I have below codes:

const HIDDEN_STYLE = `
  height:0 !important;
  visibility:hidden !important;
  overflow:hidden !important;
  position:absolute !important;
  z-index:-1000 !important;
  top:0 !important;
  right:0 !important
`;

const contextStr = "letter-spacing:normal;line-height:20px;padding-top:14px;padding-bottom:14px;font-weight:400;font-size:14px;text-rendering:optimizelegibility;text-transform:none;width:501.683px;text-indent:0px;padding-left:10px;padding-right:60px;border-width:;box-sizing:border-box"

const hiddenTextarea = document.createElement('textarea')
document.body.appendChild(hiddenTextarea)
hiddenTextarea.setAttribute('style', `${contextStr};${HIDDEN_STYLE}`);

console.log('scroll height : ', hiddenTextarea.scrollHeight)

My Firefox version: 87.0

My Chrome version: 90.0.4430.72

The scrollHeight value output in Firefox browser is 34, but in Chrome browser the value is 48. I don't know why Firefox get 34 here, can anyone explain it ?