Page MenuHomePhabricator

[Spike] Review implications of IntersectionObserver usage
Closed, ResolvedPublic3 Estimated Story PointsSpike

Description

In T284251#7481872 @TheDJ " wrote

ResizeObserver & IntersectionObserver need to be manually disconnected, else they leak memory through their callback. This happens in all browsers."
https://twitter.com/jaffathecake/status/1405437361643790337

IntersectionObserver is supported in the latest versions of iOS Safari, *but* it can be disabled. For older devices running the latest iOS, it is disabled by default to improve performance.
https://twitter.com/OliverJAsh/status/1456231452870418437

Since we plan to use this more going into sticky header and table of contents work, now seems like a great time to look into these issues and provide some best practices, adapting existing usages inside MobileFrontend for lazy loading images and RelatedArticles as necessary.

Outcome

  • Get data around impacted users that are using older devices. What % of users are impacted by the Safari preference?
  • Understand the memory leak problem and check if we are impacted.
  • Document any changes we need to make to existing code if necessary in a single Phabricator ticket.

Event Timeline

Restricted Application changed the subtype of this task from "Bug Report" to "Spike". · View Herald TranscriptNov 5 2021, 12:35 AM
Restricted Application added a subscriber: Aklapper. · View Herald Transcript
Re: ResizeObserver & IntersectionObserver need to be manually disconnected
Re: IntersectionObserver is supported in the latest versions of iOS Safari...
  • While there doesn't seem to be much documentation about this issue, reportedly older versions of iOS Safari (>= v13) have IntersectionObserver disabled on older devices which folks have solved by shipping a polyfill.
  • Based on daily pageviews over the last 30 days, Mobile Safari and Safari (desktop) account for ~14% (~3 billion) and ~3% (~600 million) respectively of total view counts.
    • Mobile Safari:
      • ~8% (1.7 billion) use v14 while 5% (1.1 billion) use v15 (latest)
    • Safari (desktop):
      • ~1.4% (~288 million) use v14 while 1% (~210 million) use v15
  • If we are committed to shipping features that rely on IntersectionObserver (note that for sticky header and presumably for the upcoming Table of Contents, we do/will check for IntersectionObserver before initializing the feature) and if these features need to work in iOS Safari, we should probably consider shipping a polyfill as well.
  • Re: Get data around impacted users that are using older devices.
    • Turnilo doesn't provide the granular data breakdowns of operating systems by device. I need to follow up with a more involved query into extracting OS by device versions and will post results back here.
User Agent data

Daily pageviews last 30 days

Screen Shot 2021-12-02 at 1.46.59 PM.png (2×3 px, 633 KB)

Follow up
  • Logged T296972 to remediate IntersectionObserver for sticky header in Vector.
  • Logged T296973 to remediate IntersectionObserver for lazy loading images in MobileFrontend.
  • Added IntersectionObserver polyfill as an agenda item for engineering team to discuss.
cjming moved this task from Doing to Code Review on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.
cjming subscribed.

Thanks Clare for looking into this.

Based on daily pageviews over the last 30 days, Mobile Safari and Safari (desktop) account for ~14% (~3 billion) and ~3% (~600 million) respectively of total view counts.

~1.4% (~288 million) use v14 while 1% (~210 million) use v15

Am I reading this correctly? Does this mean that 3% of our traffic is from desktop Safari, and that 2.4% (1+1.4) of Safari usage is modern (rest is old?) e.g. 97.6% of safari traffic is impacted?

Am I reading this correctly? Does this mean that 3% of our traffic is from desktop Safari, and that 2.4% (1+1.4) of Safari usage is modern (rest is old?) e.g. 97.6% of safari traffic is impacted?

The issue appears to affect iOS Safari specifically (I updated my comment - pardon the lack of specificity). So AFAICT desktop Safari is not affected.

Whether or not to ship a polyfill depends on if we plan on shipping IntersectionObserver dependent features in mobile. In which case this specific issue of IntersectionObserver being disabled on older devices running latest iOS likely impacts some significant portion of the ~14% (Mobile Safari) of total view counts. I'm still trying to figure out how to get data breakdowns by OS + device versions.

But also, remember that the percentages are of total view counts. So modern (v14 + v15) desktop Safari users make up ~2.4% of the total. Desktop Safari users on v14 + v15 make up ~82% of total desktop Safari users.

Screen Shot 2021-12-03 at 12.27.54 PM.png (2×2 px, 295 KB)

Got it. Does this apply to T261609

So I think this is a question for Olga with regards to lazy loading images not the sticky header and whether we should reprioritize T261609 as high.

Got it. Does this apply to T261609

If I had to hedge my bets, I think it does. But I can't find much info on the issue. The most seemingly reliable data is anecdotal - https://twitter.com/html5test/status/1456262296708075529

fyi + fwiw, I've asked @Edtadros (he has coveted Browserstack superpowers) to do some quick testing on whether IntersectionObserver is enabled/disabled by default on older devices running iOS Safari. Hopefully that will help us inform the polyfill question.

@cjming I tried a few ios devices on Browserstack. They've hidden the settings icon so I can't validate this. I sent an email to support to see if they can get me the info.

@cjming, @Edtadros - not sure if there's anything left to do here. I'll go ahead and resolve it for now, but feel free to re-open if there's need.