Lightboxed images with giant filenames cause horizontal scroll

Bug
1

I am using a recent version now, and I have an horizontal scroll browsing with my galaxy s3.

I have an adsense plugin with all slots turned off, and the tagging plugin. This is an affected topic: http://www.noiapapps.com/t/ball-run-away-simply-zigzag-ball-game/8292

2

That’s kind of weird. It seems to have to do with the first image having a very long filename.

<div class="lightbox-wrapper"><a href="https://lh3.googleusercontent.com/r16HftyROFLrFjWHegf-YnV4wfk63_1CdUfzlSiflHn3SDewY2vZtzfQdan1zuVYmHc=h900-rw" class="lightbox" title="r16HftyROFLrFjWHegf-YnV4wfk63_1CdUfzlSiflHn3SDewY2vZtzfQdan1zuVYmHc=h900-rw"><img src="https://lh3.googleusercontent.com/r16HftyROFLrFjWHegf-YnV4wfk63_1CdUfzlSiflHn3SDewY2vZtzfQdan1zuVYmHc=h900-rw" alt="Ball run away screenshot" width="340" height="454"><div class="meta">
<span class="filename">r16HftyROFLrFjWHegf-YnV4wfk63_1CdUfzlSiflHn3SDewY2vZtzfQdan1zuVYmHc=h900-rw</span><span class="informations">536x716</span><span class="expand"></span>
</div></a></div>

If you reduce the length of the filename in <span class="filename"> the horizontal scrolling goes away. I tried adding a whole bunch of letters to the filename from a lightboxed image in this topic and got the same behaviour.

2 Likes
3

@sam @zogstrip my bug report got confusing because of that webp issue, let me try to explain it better.

When the markdown is rendered, there is a hidden html span tag with the filename part of the url

At least for android and googlebot, the browser evaluates the width of the page as if this span were visible, and you get horizontal scrolling

And the horizontal browsing triggers a penalty in my search engine ranking, according to google webmasters.

I can try to reproduce it here with a jpeg when I get home.

No problem if its a wontfix, just wanted to explain it better.

1 Like
4

If, in your browser’s inspector, you set span.filename { color: red; } on a lightboxed image with a very long filename you will see what is going on when you hover over it.

1 Like
5

The fix here is to use automatic forced wrapping CSS @zogstrip

3 Likes
6

Here’s a fix :fish:

https://github.com/discourse/discourse/commit/468b04db861a9847a6b6eae18ad2915414700bee

5 Likes