Bug Heightrestrict still putting spaces under images

[Necessity4Fun]

This problem seemed to have been fixed previously but, recently, I've come to notice that the issue persists, being exceptionally noticeable on mobile.
None of these gaps was put by me and they even highlight together with the image once I tap on them on mobile, taking me to that picture's full-size mode.
It seems to be tied to how much restriction the image is being put through, with bigger restrictions (small number for a big image) resulting in bigger spaces.

Below are some examples, including comparisons between mobile and desktop modes:

Notice how in the last screenshot, the dragon image still has a bit of a space below it, indicating that the issue isn't just on mobile as one might be led to believe. In fact, as previously mentioned, the space will highlight if I tap on it as if it was a part of the picture.

 

[Alteras]

I know I’ve seen the bug, but I can’t seem to replicate it on my phone. Can you provide a live example?

 

[Necessity4Fun]

I know I’ve seen the bug, but I can’t seem to replicate it on my phone. Can you provide a live example?

Here, this is one of the simpler post layouts that both present the issue and have a rather unmissable space when on mobile:

Grace DAWN and Sky​

Text goes here

Spoiler: Code

[CENTER][FONT=The Girl Next Door][SIZE=36PX][COLOR=Mediumslateblue]Grace DAWN[/COLOR] and [COLOR=Silver]Sky[/COLOR][/SIZE][/FONT][/CENTER]

[CENTER][HEIGHTRESTRICT=500][IMG]http://orig07.deviantart.net/6371/f/2016/143/e/4/30b5c367caf30fb417e09629f5a2bc6cf_by_necessity4fun-da3juwt.jpg[/IMG][/HEIGHTRESTRICT][/CENTER]

Text goes here

In essence, that's all they are: A text header, single space, an image with heightrestrict, single space then just normal text. Some with backgrounds and borders to make them prettier and such, but without those, they're mostly exactly like this.

 

[Fable]

Alteras I can confirm, I just tested on my own phone. Chrome on Android device. Lyro any ideas?

 

[Alteras]

I see it now. It seems to just be a problem with the image ratio itself.
It was given a height of 500px, so it stretched to 500px before actually testing to see if the image can actually reach 500px after being restricted by the width of the device.

 

[Necessity4Fun]

I was checking my watched threads and thought I'd pass by, give this a little bump since well, it's still happening... ^^'

 

[Fable]

I was checking my watched threads and thought I'd pass by, give this a little bump since well, it's still happening... ^^'

I've recently used it and had no issues with a gap. I just checked the post where I used it and it's fine.


Where are you having the issue?

 

[Nano]

Uhhh to explain what Alteras said in a hopefully simplified way:

It's not really a bug but rather the heightrestrict working "too well." Let's say your image is 800x800 and you want to set it so that its height only takes up 500px. On a screen wider than 500px, it will show up as a normal 500x500 image. However, in the case of a mobile phone that let's say is only 300px wide, the image will obviously only be able to take up a width of 300px. Due to the 1:1 dimensions of the original image, this forces the height of the image to become 300px as well. But wait. What happened to the 500px heightrestrict you set then? Well that extra 200px leftover is what is causing the "space" to appear between your image and your text on smaller screens. :'D

Kind of wordy, but I hoped that helped explain. orz

 

[Necessity4Fun]

Uhhh to explain what Alteras said in a hopefully simplified way:

It's not really a bug but rather the heightrestrict working "too well." Let's say your image is 800x800 and you want to set it so that its height only takes up 500px. On a screen wider than 500px, it will show up as a normal 500x500 image. However, in the case of a mobile phone that let's say is only 300px wide, the image will obviously only be able to take up a width of 300px. Due to the 1:1 dimensions of the original image, this forces the height of the image to become 300px as well. But wait. What happened to the 500px heightrestrict you set then? Well that extra 200px leftover is what is causing the "space" to appear between your image and your text on smaller screens. :'D

Kind of wordy, but I hoped that helped explain. orz

Yep, that
I've always wondered if there was a way to fix that (or by pass it), which would probably be Lyro 's department.

I just don't think it used to do that before? It's a thing that started after we moved to Xenforo 2 I think...

 

[Nano]

Yep, that
I've always wondered if there was a way to fix that (or by pass it), which would probably be Lyro 's department.

I just don't think it used to do that before? It's a thing that started after we moved to Xenforo 2 I think...

Mmm a way to somewhat get around this issue would be to adjust the size of the image via the width instead of the height. You would do this with [div=width: 100%; max-width: #px;]IMAGE HERE[/div] where you replace the "#" with whatever you want the new width of the picture to be. (Note: The "width: 100%" is there to make sure that the image does not get cutoff on smaller screens) Not exactly the same thing, but it's something similar enough to go by until the issues with heightrestrict are resolved.