Page 1 of 1

Webpage rendering issue

Posted: Sat Aug 04, 2018 3:39 pm
by Wohoo
Hello,
I want to submit a minor bug on website interface.

Please add width and height attributes to img tags in all ranks webpages.

If I visit https://ddnet.tw/ranks/brutal/#map-whitehell
- Firefox 61.0.1 loses location as soon as new images are loaded, need to reload page or find map by hand;
- Chrome 68.0.3440.84 keeps anchored to defined location but glitches are visible during loading;

Of course delete all temporary files before clicking that link, to test misbehavior.

Solution is simple, since al thumbnails are equals in dimension:

Code: Select all

<img class="screenshot" alt="Screenshot" src="/ranks/maps/whitehell.png" width="360" height="225">
Maybe my connection is bad, but this trick should improve usability.

Re: Webpage rendering issue

Posted: Sat Aug 04, 2018 4:33 pm
by deen
Thanks, will fix!

Re: Webpage rendering issue

Posted: Sat Aug 04, 2018 7:48 pm
by Wohoo
Hei Deen,
this issue seems not really fixed :(

Solution could be image deferring:
https://stackoverflow.com/a/30460095

Fix needed also in:
https://ddnet.tw/releases/


---------------------
EDIT

Here a solution without javascript
https://www.perpetual-beta.org/weblog/r ... eflow.html

Code: Select all

<div style="max-width: 640px;">
  <figure style="padding-bottom: calc((426/640)*100%); position: relative;">
    <img src="/images/kitten.jpg" style="position: absolute;" />
  </figure>
</div>
Hope to solve this problem in some way.

Re: Webpage rendering issue

Posted: Tue Aug 07, 2018 10:40 am
by deen
Fixed in an alternative way, the css was just overriding the html-width/height. On the other hand it might not look perfect on really small screens now.