Lightboxed images with giant filenames cause horizontal scroll


(Fábio Machado De Oliveira) #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: noiapapps.com


Google Webmaster Tools warns of "mobile usability issues" due to images in topics?
Why some images aren't automatically downloaded?
(Simon Cossar) #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.


(Fábio Machado De Oliveira) #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.


(Simon Cossar) #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.


(Jeff Atwood) #5

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


(RĂ©gis Hanol) #6

Here’s a fix :fish:


(Jeff Atwood) #7