Issues while scrolling websites with sticky header/footer

[danishjafri88]

Description:

App becomes unresponsive (loss of FPS maybe), while scrolling (jumps instead of scroll) in websites with sticky footer/Header.
Example: m.indiatimes.com (iPhone, footer) & m.youtube.com (iPad, header)

In certain cases the sticky header/footer may also get clipped by browser container.
Example: m.youtube.com (iPad, header)

Steps to Reproduce

1. Open either of the two websites above.
2. Scroll slowly as to hide the top/bottom bars

Actual result:
Loss of responsiveness/ fps and sometimes clipping of sticky header/footer in websites.

Expected result:
No Scroll Issues

Reproduces how often: [Easily reproduced, Intermittent Issue]

Brave Version:

Device details:

Website problems only:

• did you check with Brave Shields down?
• did you check in Safari/Firefox (WkWebView-based browsers)?

Additional Information

[danishjafri88]

After through research, I found that the issue with indiatimes.com is bad css and script. It's a poorly implemented webpage which has onScroll event listeners and uses a lot of z-indexing. Though this issue is solved in Safari mobile (I am guessing they are somehow ignoring z-index, to which many web developers have responded a solution like https://stackoverflow.com/questions/32875046/ios-9-safari-changing-an-element-to-fixed-position-while-scrolling-wont-paint/43188105#43188105). We can take the approach as mentioned or ignore this completely.

Still looking into the iPad issue for youtube. And the consistent scroll jump when tabs are visible.

[LaurenWags]

• Verified passed on iPad 5th Gen (iOS 12.3.1) running 1.10 (19.07.12.14)
  • Verified sites listed (m.indiatimes.com and m.youtube.com) did not have scrolling issues on iPad 5th gen in portrait or landscape modes.
• Verification PASSED on iPhone 6s+ running iOS 12.3.1 using 1.10 (19.07.16.23)