Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

Iframes doesn't load to completion when in tab with forceRender

Open
#325 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
35/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Stale
Tech stack
react, typescript
Domain
frontend

Research direction

Start with the CodeSandbox reproduction in index.js and inspect how rc-tabs 11.7.0 handles forceRender when switching tabs. Compare the behavior with rc-tabs 10 as suggested in the report, then verify in Chrome on macOS or Linux that an embedded chart continues loading to completion while its tab is unfocused.

Written by the indexing model from the issue text.

Description

  • I have searched the issues of this repository and believe that this is not a duplicate.
Reproduction link

[Edit on CodeSandbox]

Steps to reproduce

Let the first visible chart load fully. Then after a couple seconds, switch to another tab.
You can see that the loader is gone but the chart haven't finished to load.

What is expected?

We expect that the charts (that are embeded in frames) loads fully, even without focus

What is actually happening?

When we switch tabs, the iframes stop loading while in background.

Environment Info
rc tabs 11.7.0
React 16.12.0
System mac/linux
Browser chrome latest

We are using rc-tabs through antdesign, but I managed to reproduce the bug with rc-tabs, so I'm reporting it here also.
Note we did not had this bug with antdesign 3, it appeared in ant 4.

Apparently, it seems to be working with rc-tabs 10, but it may need to be double checked on your side (did not managed to fully integrate rc-tabs 10 in my codesandbox).

Dominant language
TypeScript
Stars
572
Forks
241
Avg merge
4d 18h
Merged PRs (30d)
4

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from react-component/tabs

All issues in react-component/tabs

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.