web-components icon indicating copy to clipboard operation
web-components copied to clipboard

Remove DirHelper as browser scroll behavior is now consistent

Open web-padawan opened this issue 3 years ago • 0 comments
trafficstars

Describe your motivation

The DirHelper has been added in https://github.com/vaadin/vaadin-element-mixin/pull/32 to address browser differences with regards to how scrollLeft is calculated when using dir="rtl". Back then, as of early 2020, the situation was as follows:

  • Chrome = default scroll type,
  • Firefox / Safari = negative type,
  • IE / legacy Edge = reverse type.

See Chromium issue for more detail. Note, the issue was marked as fixed later in July 2020 and the fix landed in Chrome 85. Regarding behavior of WebKit (Safari) mentioned in the above issue - it was fixed in 2017 to align with Gecko (Firefox).

Based on testing, all the supported browser versions now use negative scroll type, as detected using this code:

<script type="module">
  import { DirHelper } from '@vaadin/component-base/src/dir-helper.js'

  console.log(DirHelper.detectScrollType());
</script>
Chrome 103

rtl-chrome-103

Firefox 101

rtl-firefox-101

Safari 15.1

rtl-safari-15

Edge 103

rtl-edge-103

Describe the solution you'd like

  1. Simplify DirHelper to remove detectScrollType() method and use negative mode for two other methods.
  2. Mark DirHelper as deprecated in JSDoc / .d.ts file and later remove in the next major release (Vaadin 24).

web-padawan avatar Jul 07 '22 09:07 web-padawan