Tiles view scrolling on iOS

Plugin

topic-list-previews

Steps to Reproduce

  1. Activate tiles view and preview images on a topic list
  2. On initial page load on an iPhone, scroll to the bottom of the screen
  3. Sometimes more topics are not loaded
    This happens intermittently

Example

https://hsp.world/c/news-feed

This only appears on iOS.

From Angus:

The issue seems to be in the operation of the ‘load-more’ mixin and its use of the Eyeline library to detect when the bottom of the topic list is reached. The issue is probably something to do with the time the topic list is rendered and when the load-more mixin + Eyeline attempt to determine whether the last topic is showing on the screen.

This seems to be confined to iOS and possibly only older versions of iOS.

Logs

You can see this issue on a production site with the following logs in a theme component.

<script type="text/discourse-plugin" version="0.8">
  const on = require('ember-addons/ember-computed-decorators').on;
  const Eyeline = require("discourse/lib/eyeline").default;
  api.modifyClass('component:discovery-topics-list', {
    scrolled() {
      const eyeline = this.eyeline;
      console.log('eyeline', eyeline)
      return eyeline && eyeline.update();
    },

    @on("didInsertElement")
    _bindEyeline() {
      const eyeline = new Eyeline(this.eyelineSelector + ":last");
      this.set("eyeline", eyeline);
      eyeline.on("sawBottom", () => {
        console.log('sawBottom triggered');
        this.send("loadMore")
      });
      this.bindScrolling();
    }
  })
</script>

Possibly related: Dealing with iOS 8 Mobile Safari bugs? - feature - Discourse Meta

Cannot reproduce. Working fine on my site. But am using iOS 12.4.

What version of iOS was this noticed on? Can you update to latest iOS?

Don’t have access to the link.

Sorry here’s the Link: HSP News Feed - HSP World

I’m currently seeing it on my iPhone 6

1 Like

Those images appear to be huge. Is thumbnailing active? Could be the amount of processing being expected to take place that is delaying the layout.

Right, I can now repro on that site. But it’s a long delay, not a failure?

It’s almost definitely a non-functional issue because it works fine on Firefox in Responsive testing with iPhone dimensions.

I would definitely investigate if the thumbnails can used and lowered in resolution.

@Eli

We’ve seen this again on HSP forum. I believe this is Masonry taking up too much processing.

I believe Masonry is firing after the load more animation has completed. This is normally not an issue but when performance is slow, it seems to be doing nothing. Wait a few seconds, though, and it will eventually arrange the new tiles. To see the new tiles rendering before they are arranged scroll to the top.

Again, if I could only use the alternative renderer I built it would be great. It is MUCH faster. Unfortunately Chrome hasn’t yet increased the number of supported CSS Grid rows to make that practical for the mainstream release. However you can selectively use the renderer if you so choose by specifying its branch. I still maintain this branch and frequently merge in changes to the master.

1 Like