Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(addon-mobile): virtual-scroll flickers during scroll in zoneless mode #10023

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix(addon-mobile): virtual-scroll flickers during scroll in zoneless mode #10023

wants to merge 1 commit into from
+8 −1

Conversation

splincode
Copy link
Member

Fixes #9662

Before

Screen.Recording.2024-12-18.at.3.17.51.PM.mov

After

Screen.Recording.2024-12-18.at.3.10.29.PM.mov

@splincode splincode requested a review from a team as a code owner December 18, 2024 12:19
@splincode splincode requested review from MarsiBarsi, waterplea, nsbarsukov, vladimirpotekhin and mdlufy and removed request for a team December 18, 2024 12:19
@lumberjack-bot lumberjack-bot
Copy link

lumberjack-bot bot commented Dec 18, 2024 •
edited
Loading

Failed tests ❌

Before (main) ← Diff → After (local)

tests-addon-mobile-mobile--77c1d-dar.pw-MobileCalendar-works-webkit-retry2/01-mobile-calendar.diff.png
tests-addon-mobile-mobile--a1e65-e-user-agent-InputDateMulti-webkit-retry2/02-input-date-range-mobile-1.diff.png
tests-addon-mobile-mobile--bf2eb-mobile-user-agent-InputDate-webkit-retry2/03-input-date-range-mobile-1.diff.png
tests-addon-mobile-mobile--f9803-e-user-agent-InputDateRange-webkit-retry2/01-input-date-range-mobile-1.diff.png
tests-legacy-input-date-in-0eb0a-e-mobile-calendar---spanish-chromium-retry2/08-input-date-spanish.diff.png
tests-legacy-input-date-in-824cc-e-mobile-calendar---english-chromium-retry2/08-input-date-english.diff.png
tests-legacy-input-date-in-b42f6-e-mobile-calendar---russian-chromium-retry2/08-input-date-russian.diff.png
tests-addon-mobile-mobile--a1e65-e-user-agent-InputDateMulti-chromium-retry2/02-input-date-range-mobile-1.diff.png
tests-addon-mobile-mobile--bf2eb-mobile-user-agent-InputDate-chromium-retry2/03-input-date-range-mobile-1.diff.png
tests-addon-mobile-mobile--77c1d-dar.pw-MobileCalendar-works-chromium-retry2/01-mobile-calendar.diff.png
tests-addon-mobile-mobile--f9803-e-user-agent-InputDateRange-chromium-retry2/01-input-date-range-mobile-1.diff.png
tests-legacy-multi-select--2d1d5-t-with-data-list-with-label-chromium-retry2/02-with-data-list-with-label.diff.png
tests-legacy-multi-select--bd051-log-with-tuiTextfieldSize-l-chromium-retry2/04-dialog-with-text-field-size-l.diff.png
tests-legacy-multi-select--e1648-log-with-tuiTextfieldSize-m-chromium-retry2/04-dialog-with-text-field-size-m.diff.png
tests-legacy-input-date-in-0eb0a-e-mobile-calendar---spanish-webkit-retry2/08-input-date-spanish.diff.png
tests-legacy-input-date-in-824cc-e-mobile-calendar---english-webkit-retry2/08-input-date-english.diff.png
tests-legacy-input-date-in-b42f6-e-mobile-calendar---russian-webkit-retry2/08-input-date-russian.diff.png

(updated for commit 0cda981)

@codecov Codecov
Copy link

codecov bot commented Dec 18, 2024 •
edited
Loading

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 66.13%. Comparing base (8fddac1) to head (5f83f62).

Additional details and impacted files 
@@           Coverage Diff           @@
##             main   #10023   +/-   ##
=======================================
  Coverage   66.13%   66.13%           
=======================================
  Files        1215     1215           
  Lines       15720    15720           
  Branches     2254     2267   +13     
=======================================
  Hits        10397    10397           
- Misses       5124     5168   +44     
+ Partials      199      155   -44
Flag Coverage Δ
summary 66.13% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Dec 18, 2024 •
edited
Loading

Visit the preview URL for this PR (updated for commit 0cda981):

https://taiga-previews-demo--pr10023-splincode-fix-issues-9662-wotaopxq.web.app

(expires Sat, 21 Dec 2024 07:52:14 GMT)

🔥 via Firebase Hosting GitHub Action 🌎

Sign: 73dddc3c665194f3e11f18c16aeb71af4c289c37

@bundlemon BundleMon
Copy link

bundlemon bot commented Dec 18, 2024 •
edited
Loading

BundleMon

Unchanged files (5)
Status Path Size Limits
✅ demo/browser/main.(hash).js
 304.5KB +10%
✅ demo/browser/vendor.(hash).js
 260.25KB +10%
✅ demo/browser/runtime.(hash).js
 44.05KB +10%
✅ demo/browser/styles.(hash).css
 20.2KB +10%
✅ demo/browser/polyfills.(hash).js
 11.18KB +10%

Total files change +1B 0%

Groups updated (1)
Status Path Size Limits
✅ demo/browser/*..js
 7.36MB (+37B 0%) -

Final result: ✅

View report in BundleMon website ➡️

Current branch size history | Target branch size history

@splincode splincode force-pushed the splincode/fix/issues/9662 branch 3 times, most recently from 3160ce2 to 5f83f62 Compare December 18, 2024 14:48
@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Dec 18, 2024 •
edited
Loading

Playwright test results

failed  19 failed
passed  1867 passed
flaky  3 flaky
skipped  85 skipped

Details

report  Open report ↗︎
stats  1974 tests across 69 suites
duration  20 minutes, 14 seconds
commit  0cda981

Failed tests

chromium › tests/addon-mobile/mobile-calendar/input-date.pw.spec.ts › InputDate and mobile user agent › InputDateRange
chromium › tests/addon-mobile/mobile-calendar/input-date.pw.spec.ts › InputDate and mobile user agent › InputDateMulti
chromium › tests/addon-mobile/mobile-calendar/input-date.pw.spec.ts › InputDate and mobile user agent › InputDate
webkit › tests/addon-mobile/mobile-calendar/input-date.pw.spec.ts › InputDate and mobile user agent › InputDateRange
webkit › tests/addon-mobile/mobile-calendar/input-date.pw.spec.ts › InputDate and mobile user agent › InputDateMulti
webkit › tests/addon-mobile/mobile-calendar/input-date.pw.spec.ts › InputDate and mobile user agent › InputDate
chromium › tests/addon-mobile/mobile-calendar/mobile-calendar.pw.spec.ts › MobileCalendar › works
webkit › tests/addon-mobile/mobile-calendar/mobile-calendar.pw.spec.ts › MobileCalendar › works
chromium › tests/legacy/input-date/input-date.pw.spec.ts › InputDate › Mobile › mobile calendar - russian
chromium › tests/legacy/input-date/input-date.pw.spec.ts › InputDate › Mobile › mobile calendar - english
chromium › tests/legacy/input-date/input-date.pw.spec.ts › InputDate › Mobile › mobile calendar - spanish
webkit › tests/legacy/input-date/input-date.pw.spec.ts › InputDate › Mobile › mobile calendar - russian
webkit › tests/legacy/input-date/input-date.pw.spec.ts › InputDate › Mobile › mobile calendar - english
webkit › tests/legacy/input-date/input-date.pw.spec.ts › InputDate › Mobile › mobile calendar - spanish
chromium › tests/legacy/input-date-range/input-date-range.pw.spec.ts › InputDateRange › API › Mobile emulation › Selection of only single date produces range with the same start and end
webkit › tests/legacy/input-date-range/input-date-range.pw.spec.ts › InputDateRange › API › Mobile emulation › Selection of only single date produces range with the same start and end
chromium › tests/legacy/multi-select/multi-select.pw.spec.ts › MultiSelect › Examples › Multiselect inside dialog with different textfield sizes › multiselect inside dialog with tuiTextfieldSize=m
chromium › tests/legacy/multi-select/multi-select.pw.spec.ts › MultiSelect › Examples › Multiselect inside dialog with different textfield sizes › multiselect inside dialog with tuiTextfieldSize=l
chromium › tests/legacy/multi-select/multi-select.pw.spec.ts › MultiSelect › Examples › multi-select with data list with label

Flaky tests

chromium › tests/core/hint/hint.pw.spec.ts › TuiHint › false mode hint with delay
webkit › tests/kit/calendar-range/calendar-range.pw.spec.ts › CalendarRange › API › Dont allow to select disabled dates in calendar
webkit › tests/kit/carousel/carousel.pw.spec.ts › Carousel › padding has zero value

Skipped tests

webkit › tests/addon-commerce/input-card-group.pw.spec.ts › InputCardGroup › Examples › input card grouped with validation
webkit › tests/addon-commerce/input-card-group.pw.spec.ts › InputCardGroup › Examples › input card grouped with saved cards
webkit › tests/addon-commerce/input-card-group.pw.spec.ts › InputCardGroup › Examples › expired field should be clickable after reset of prefilled value
webkit › tests/addon-doc/navigation.pw.spec.ts › Navigation › anchor links navigation works › scroll to "tui-doc-example"
webkit › tests/addon-doc/navigation.pw.spec.ts › Navigation › anchor links navigation works › scroll to "tui-doc-code"
webkit › tests/addon-doc/navigation.pw.spec.ts › Navigation › anchor links navigation works › scroll after click on link with anchor
webkit › tests/addon-doc/navigation.pw.spec.ts › Navigation › getting started / [light mode]
webkit › tests/addon-doc/navigation.pw.spec.ts › Navigation › getting started / [dark mode]
webkit › tests/core/data-list/data-list.pw.spec.ts › DataList › Submenu
webkit › tests/core/data-list/data-list.pw.spec.ts › DataList › Form control
webkit › tests/core/data-list/data-list.pw.spec.ts › DataList › Complex
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 320x480 › Dialog with confirmation works › Prompt
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 320x480 › Dialog with confirmation works › Pristine form does not show confirmation
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 320x480 › Dialog with confirmation works › Dirty form shows confirmation
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 320x480 › Dialog with confirmation works › Form is reset to pristine
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 320x480 › A dialog and a nested dialog are open correctly
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 320x480 › Mobile dialog works
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 320x480 › Dialog with directive works
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 320x480 › Show simple
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 320x480 › Show simple + custom button
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 720x900 › Dialog with confirmation works › Prompt
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 720x900 › Dialog with confirmation works › Pristine form does not show confirmation
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 720x900 › Dialog with confirmation works › Dirty form shows confirmation
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 720x900 › Dialog with confirmation works › Form is reset to pristine
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 720x900 › A dialog and a nested dialog are open correctly
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 720x900 › Mobile dialog works
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 720x900 › Dialog with directive works
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 720x900 › Show simple
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 720x900 › Show simple + custom button
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 1024x900 › Dialog with confirmation works › Prompt
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 1024x900 › Dialog with confirmation works › Pristine form does not show confirmation
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 1024x900 › Dialog with confirmation works › Dirty form shows confirmation
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 1024x900 › Dialog with confirmation works › Form is reset to pristine
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 1024x900 › A dialog and a nested dialog are open correctly
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 1024x900 › Mobile dialog works
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 1024x900 › Dialog with directive works
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 1024x900 › Show simple
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 1024x900 › Show simple + custom button
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 1620x1024 › Dialog with confirmation works › Prompt
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 1620x1024 › Dialog with confirmation works › Pristine form does not show confirmation
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 1620x1024 › Dialog with confirmation works › Dirty form shows confirmation
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 1620x1024 › Dialog with confirmation works › Form is reset to pristine
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 1620x1024 › A dialog and a nested dialog are open correctly
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 1620x1024 › Mobile dialog works
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 1620x1024 › Dialog with directive works
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 1620x1024 › Show simple
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 1620x1024 › Show simple + custom button
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › Prompt - 320x480
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › Prompt - 720x900
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › Prompt - 1024x900
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › Prompt - 1620x1024
webkit › tests/core/surface/surface.pw.spec.ts › Surface › Layers
webkit › tests/kit/carousel/carousel.pw.spec.ts › Carousel › should show next item after drag
webkit › tests/kit/dropdown-hover/dropdown-hover.pw.spec.ts › DropdownHover › Examples › With DropdownMobile › Closes dropdown on click on overlay
webkit › tests/kit/dropdown-hover/dropdown-hover.pw.spec.ts › DropdownHover › Examples › With DropdownMobile › Opens mobile version of dropdown on the 2nd time click
webkit › tests/kit/range/range.pw.spec.ts › TuiRange › examples page › change selected range on click › click on the beginning of the track changes only nearest (left) slider
webkit › tests/kit/range/range.pw.spec.ts › TuiRange › examples page › change selected range on click › click on the end of the track changes only nearest (right) slider
webkit › tests/kit/range/range.pw.spec.ts › TuiRange › examples page › change selected range on click › click between two thumbs triggers only nearest thumb
webkit › tests/kit/range/range.pw.spec.ts › TuiRange › examples page › keyboard interactions › basic range (from 0 to 1000 with 250 steps). Initial value [0, 250] › pressing of Arrow Right increases by one step (after focus on right slider)
webkit › tests/kit/range/range.pw.spec.ts › TuiRange › examples page › keyboard interactions › basic range (from 0 to 1000 with 250 steps). Initial value [0, 250] › pressing of Arrow Right increases by one step (after focus on left slider)
webkit › tests/kit/range/range.pw.spec.ts › TuiRange › examples page › keyboard interactions › basic range (from 0 to 1000 with 250 steps). Initial value [0, 250] › pressing of Arrow Left decreases by one step (after setting right thumb active via click)
webkit › tests/kit/range/range.pw.spec.ts › TuiRange › examples page › keyboard interactions › basic range (from 0 to 1000 with 250 steps). Initial value [0, 250] › cannot set left thumb more than right thumb (by Arrow Right)
webkit › tests/kit/range/range.pw.spec.ts › TuiRange › examples page › keyboard interactions › basic range (from 0 to 1000 with 250 steps). Initial value [0, 250] › cannot set right thumb less than left thumb (by ArrowLeft)
webkit › tests/kit/range/range.pw.spec.ts › TuiRange › examples page › keyboard interactions › range with keySteps (from 0 to 1M) with 8 steps. Initial value [0, 100_000] › ArrowUp increases value of the focused slider
webkit › tests/kit/range/range.pw.spec.ts › TuiRange › examples page › keyboard interactions › range with keySteps (from 0 to 1M) with 8 steps. Initial value [0, 100_000] › ArrowDown decreases value of the focused slider
webkit › tests/kit/range/range.pw.spec.ts › TuiRange › examples page › keyboard interactions › range with keySteps (from 0 to 1M) with 8 steps. Initial value [0, 100_000] › cannot set position of the LEFT slider MORE THAN position of the RIGHT slider (by ArrowUp)
webkit › tests/kit/range/range.pw.spec.ts › TuiRange › examples page › keyboard interactions › range with keySteps (from 0 to 1M) with 8 steps. Initial value [0, 100_000] › cannot set position of the RIGHT slider LESS THAN position of the LEFT slider (by ArrowDown)
webkit › tests/kit/slider/slider.pw.spec.ts › Slider › programmatically change value › ngModel › decrease value by 1 step
webkit › tests/kit/slider/slider.pw.spec.ts › Slider › programmatically change value › ngModel › increase value by 1 step
webkit › tests/kit/slider/slider.pw.spec.ts › Slider › programmatically change value › ngModel › increase value by 2 steps
webkit › tests/kit/tabs/tabs.pw.spec.ts › Tabs › Examples › complex › no extra margin after the last tab
webkit › tests/kit/tabs/tabs.pw.spec.ts › Tabs › Examples › complex › shows only a single dropdown for the nested item (with [tuiDropdown]) inside more section
webkit › tests/layout/navigation.pw.spec.ts › Navigation › Show settings in aside
webkit › tests/layout/navigation.pw.spec.ts › Navigation › Show hint in aside
webkit › tests/layout/navigation.pw.spec.ts › Navigation › A12y
webkit › tests/legacy/input-time/input-time.pw.spec.ts › InputTime › API › items are passed › the dropdown is visible when the input is focused
webkit › tests/legacy/input-time/input-time.pw.spec.ts › InputTime › API › items are passed › the dropdown is configured for s size
webkit › tests/legacy/input-time/input-time.pw.spec.ts › InputTime › API › items are passed › the dropdown is configured for m size
webkit › tests/legacy/input-time/input-time.pw.spec.ts › InputTime › API › items are passed › the dropdown is configured for l size
webkit › tests/legacy/multi-select/multi-select.pw.spec.ts › MultiSelect › Examples › Multiselect inside dialog with different textfield sizes › multiselect inside dialog with tuiTextfieldSize=s
webkit › tests/legacy/multi-select/multi-select.pw.spec.ts › MultiSelect › Examples › Multiselect inside dialog with different textfield sizes › multiselect inside dialog with tuiTextfieldSize=m
webkit › tests/legacy/multi-select/multi-select.pw.spec.ts › MultiSelect › Examples › Multiselect inside dialog with different textfield sizes › multiselect inside dialog with tuiTextfieldSize=l
webkit › tests/legacy/multi-select/multi-select.pw.spec.ts › MultiSelect › Examples › does not overflow arrow icon by many tags
webkit › tests/legacy/multi-select/multi-select.pw.spec.ts › MultiSelect › Examples › multi-select with data list with label
webkit › tests/legacy/multi-select/multi-select.pw.spec.ts › MultiSelect › Examples › multi-select with data list without label

@splincode splincode force-pushed the splincode/fix/issues/9662 branch from 5f83f62 to 0cda981 Compare December 20, 2024 07:47
@splincode
Copy link
Member Author

@vladimirpotekhin hello, please review me

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@waterplea waterplea waterplea approved these changes

@MarsiBarsi MarsiBarsi Awaiting requested review from MarsiBarsi MarsiBarsi is a code owner automatically assigned from taiga-family/core-team

@nsbarsukov nsbarsukov Awaiting requested review from nsbarsukov nsbarsukov is a code owner automatically assigned from taiga-family/core-team

@vladimirpotekhin vladimirpotekhin Awaiting requested review from vladimirpotekhin vladimirpotekhin is a code owner automatically assigned from taiga-family/core-team

@mdlufy mdlufy Awaiting requested review from mdlufy mdlufy is a code owner automatically assigned from taiga-family/core-team

At least 2 approving reviews are required to merge this pull request.

Assignees

@splincode splincode

Labels
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

🐞 - support MobileCalendar with zoneless
2 participants
@splincode @waterplea