Skip to content

fix: panel flashes when using virtual option in react #916

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.

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

Open
wants to merge 2 commits into
base: master
Choose a base branch
from

Conversation

malangfox
Copy link
Contributor

@malangfox malangfox commented Mar 28, 2025

Issue

#915

Details

After the display: none style is applied to hidden Panel, there appears to be a flash before the correct transform is applied.

applyTransform does not work when renderer.rendering is active.

In the ReactRenderer, I modified the execution order as follows so that applyTransform is applied together with Panel addition/removal:

  public async render() {
    const flicking = getFlickingAttached(this._flicking);
    const reactFlicking = this._reactFlicking;
    const strategy = this._strategy;

    strategy.updateRenderingPanels(flicking);
    this._rendering = true;

    strategy.renderPanels(flicking);
  }

The key change is that this._rendering = true; has been moved below updateRenderingPanels.

By implementing the modification above, the issue is resolved without needing to call applyTransform in beforeRender.

  • renderPanels is responsible for adding or removing Panels in the virtual area.
  • updateRenderingPanels calls camera.updateOffset();.
  • Since updateOffset calls applyTransform, delaying the timing of setting renderer.rendering to true ensures that the translation values are correctly applied in accordance with the state where Panels are added/removed in renderPanels.

@coveralls
Copy link

coveralls commented Mar 28, 2025

Coverage Status

coverage: 82.673%. remained the same
when pulling fa073c0 on malangfox:fix/react-virtual
into 293da58 on naver:master.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants