alquilarenelcentro.lol - mobile site is not usable

[webcompat-bot]

URL: http://alquilarenelcentro.lol/ Browser / Version: Firefox Mobile 54.0 Operating System: Android 7.1.2 Problem type: Mobile site is not usable

Steps to Reproduce

1. Navigate to: http://alquilarenelcentro.lol/
2. Move sliders.

Expected Behavior: Amounts of money under them change as the map changes

Actual Behavior: Money not shown. Works on Firefox desktop although there are some layout issues with the headers background colored blocks.

From webcompat.com with ❤️

[karlcow]

It is working relatively well with one tap along the axis. But it kind of fail with dragging. It's sometimes working but very slow and I even managed to crash Firefox.

pushing to needsdiagnosis.

[softvision-sergiulogigan]

This issue is still around. The sliders are super unresponsive. Tested on Huawei P10, Android 7.0 and Nightly 61.

[softvision-oana-arbuzov]

The issue is still reproducible and it gets worse when the slider is dragged.

Affected area:

<div class="text-selection-map">
    <label for="cities-selection" class="title-map-selector">Elige la ciudad</label>
    <div class="cities-selection">
        <button class="btn-city btn-madrid btn-focus" type="button" name="button">Madrid</button>
        <button class="btn-city btn-barcelona" type="button" name="button">Barcelona</button>
    </div>
    <label class="title-home-selector label-form" for="radio-group">¿Quieres vivir solo o compartir?</label>
    <div>
        <div style="float:left; width:20%;">
            <input data-number="" id="solo" name="radio-group" type="radio">
                <label for="solo" class="home-selector">Solo</label>
        </div>
        <div style="float:right; width:60%;">
            <input data-number="" id="share" name="radio-group" type="radio">
                <label for="share" class="home-selector">Compartir</label>
        </div>
    </div>
    <label class="label-form" for="range-money">
        <span id="question">¿Cuánto cobras al mes?</span>
        <br>
        <span id="map-salary-value">1200 €</span>
    </label>
    <input class="range-one" name="range-money" value="1200" min="600" max="5000" step="100" id="map-salary" type="range">
        <label class="label-form" for="range-meters">¿Qué tamaño de apartamento quieres? 
            <br>
            <span id="map-apartment-size-value">45 m2</span>
        </label>
    <input class="range-one" name="range-meters" value="45" min="30" max="200" step="5" id="map-apartment-size" type="range">
        <label class="label-form" for="range-time">Observa la evolución de precios por año 
            <br>
            <span id="map-year-value">2017</span>
        </label>
    <input class="range-one" name="range-time" min="2010" max="2017" step="1" value="2017" id="map-year" type="range">
</div>

Tested with: Browser / Version: Firefox Nightly 62.0a1 (2018-05-22) Operating System: Samsung Galaxy Tab S3 (Android 7) - 1536 x 2048 pixels, 4:3 ratio (~264 ppi density), Samsung Galaxy S7 Edge (Android 7.0) - Resolution 1440 x 2560 pixels (~534 ppi pixel density)

[wisniewskit]

I'm not seeing any obvious difference between what Chrome is showing me as opposed to what Firefox is showing me. Is this still reproducing for you, @karlcow, @softvision-oana-arbuzov? If so, I'm not sure what I am supposed to be looking for that is different on Firefox.

I do notice that the sliders feel a bit more sluggish in Firefox, but that's just perceived performance. Chrome moves the sliders faster than Firefox, but the map updates as slowly (and the UI is frustrating because sometimes you slide the page left or right instead of the slider).

The slowness seems to be because they're making 8 Ajax requests for every "step" you take along a slider, for 4 30KB and 4 130KB. Processing all of that JSON isn't going to be terribly fast even on modern mobile devices, but none of that is really a webcompat issue so much as the site being relatively unoptimized.

[softvision-oana-arbuzov]

@wisniewskit , I'm no longer able to reproduce the issue regarding the money change when moving the slider on the axis. The unresponsiveness of the sliders is still present.

[karlcow]

@softvision-oana-arbuzov replied to @wisniewskit removing the needinfo.