carbon-components-angular icon indicating copy to clipboard operation
carbon-components-angular copied to clipboard

fix(modal): fix rounding issue in shouldShowScrollbar

Open yinglejia opened this issue 3 years ago • 1 comments

shouldShowScrollbar uses scrollHeight to determine whether the modal content is scrollable or not. The problem is that scrollHeight returns a rounded value, and its implementation (round up or down) is browser-specific. For text elements, with the default Carbon styles, the modal content height is 28.02 px. Different browsers may return different values. e.g.:

  • Chrome seems to always return 28.
  • FireFox returns 28 for some languages (e.g. English), but returns 29 for some other languages (e.g. Chinese).

The previous implementation uses Math.round to round getBoundingClientRect().height before comparison. This results in false positive for some languages like Chinese. It seems we should use Math.ceil instead.

Before:

image

After:

image

yinglejia avatar Aug 02 '22 18:08 yinglejia

Deploy Preview for carbon-components-angular ready!

Name Link
Latest commit 6e99cee76cbd15bdaaa99ec76bbe0eaede470a43
Latest deploy log https://app.netlify.com/sites/carbon-components-angular/deploys/63039be55757610008d4a4da
Deploy Preview https://deploy-preview-2214--carbon-components-angular.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

netlify[bot] avatar Aug 02 '22 18:08 netlify[bot]

:tada: This PR is included in version 4.59.11 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

carbon-bot avatar Aug 22 '22 15:08 carbon-bot

:tada: This PR is included in version 5.0.6 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

carbon-bot avatar Sep 23 '22 23:09 carbon-bot