Wrong anchored link position with lazy loaded external images

[hhry]

Affected version

2.2.11

I realize there have been some fixes in the past about layout jumping, but there's still similar issue on our board.

To rule out any addons etc, here is a demonstration on a completely stock 2.2.11 installation, identical threads with externally linked and internally uploaded same image. Atleast this behaviour is simple to recreate when the image post has a short post after it and nothing else. If there are more posts/content below, it might not happen as often or at all.

Image dimensions are 4032x3204 if it matters. (edit: it doesn't matter, even using smaller image in the post makes no difference)

To view this content we will need your consent to set third party cookies.
For more detailed information, see our cookies page.

Accept third party cookies

TL;DW: When pressing post #3 anchor link with external image above, it ends up way too far up, you can't even see any of post #3.

Note: I guess what I mean by "external images" are normally called "hotlinked images", if that clarifies anything.

 

[hhry]

Ok here is a working public link, example with lots of external (hotlinked) pictures..

Kuvia avatuista laitteista

^Kyllä siinä joku suojaus on. Vähintäänkin sulakkeet. Ei tosin välttämättä sellaiset perinteiset lasiputket.

foorumi.hifiharrastajat.org

This is where I mostly end up with the link on Firefox and Chrome:



It's supposed to go to post #1 879 which is way way down there after many images..

So is this just a general "feature" of lazy images and browsers stop doing things? Can't it be fixed with a bit of sleep and some javascript call to go to right position?

 

[hhry]

Would an option for removing loading="lazy" attribute for external images work?

 

[hhry]

Ok I think I mostly fixed it.

Change lightbox_macros:

width="{$width}" height="{$height}" loading="lazy" />

To:

<xf:if is="$width">width="{$width}" height="{$height}" loading="lazy"</xf:if> />

Change bb_code_tag_img:

<xf:else />
    <img src="{$imageUrl}" data-url="{$validUrl}" class="bbImage {$alignClass}" loading="lazy"
        {{ $alt ? ('alt="' . $alt|for_attr . '" title="' . $alt|for_attr . '"') : '' }} style="{$styleAttr}" width="{$width}" height="{$height}" />
</xf:if>

To:

<xf:else />
  <xf:if is="$width">
    <img src="{$imageUrl}" data-url="{$validUrl}" class="bbImage {$alignClass}" loading="lazy"
        {{ $alt ? ('alt="' . $alt|for_attr . '" title="' . $alt|for_attr . '"') : '' }} style="{$styleAttr}" width="{$width}" height="{$height}" />
  <xf:else />
    <img src="{$imageUrl}" data-url="{$validUrl}" class="bbImage {$alignClass}"
        {{ $alt ? ('alt="' . $alt|for_attr . '" title="' . $alt|for_attr . '"') : '' }} style="{$styleAttr}" />
  </xf:if>
</xf:if>

As far as I understand, empty $width will mean that the image is hotlinked. So why print empty width="" height="" for nothing, and not using lazy loading for such images seems to have things mostly fixed. On some occasions it might jump elsewhere, but atleast it's better now.

 

[hhry]

Is it not possible to capture image dimensions when users add an external image by link?

So instead of saving it like now:

[IMG]https://foo/bar.jpg[/IMG]

Add the original size to bbcode:

[IMG width="4096px" height="2048px"]https://foo/bar.jpg[/IMG]

This way lazy loading for these images should work fine?

 

[hhry]

Ok I think I mostly fixed it.

... or not.

Firefox (which I use) is very hard to get glitching with my fix, I've even tried throttling bandwidth with Developer tools etc. It works correctly pretty much every time.

Chrome on the other hand I can get jumping to wrong places very easily, it seems a mess.