malltina.com - The section below the Cart section, is overlapped

[mfat]

URL: https://malltina.com/product/mlt-4964072

Browser / Version: Firefox Mobile 74.0 Operating System: Android Tested Another Browser: Yes

Problem type: Site is not usable Description: site is not displayed correctly Steps to Reproduce:

Browser Configuration

• None

From webcompat.com with ❤️

[softvision-sergiulogigan]

Thanks for the report! I'm able to reproduce the issue. The section below the Cart section, is overlapped.

Tested with: Browser / Version: Firefox Preview Nightly 200209 (🦎: 74.0a1-202002070355551) Operating System: Samsung Galaxy S8 (Android 9) - 1440 x 2960 pixels, 18.5:9 ratio (~570 ppi density)

Moving to Needsdiagnosis.

[karlcow]

It doesn't reproduce for me on Firefox 75.0a1 20200212

[softvision-sergiulogigan]

This is on Firefox Preview Nightly 200213 (🦎: 75.0a1-20200212093201)

I wonder why is not reproducible on your side...

[karlcow]

let's test again on firefox preview nightly 20200214100511 ahha. because I was looking at the wrong section of the page. Ok I can see it now. Thanks @softvision-sergiulogigan (or maybe I had triggered a resize)

The icons are overlapping each other.

Ah found :)

Replace

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

by

<meta name="viewport" content="width=device-width, initial-scale=1">

and this is working, but that might be because doing that it triggers a restyle of the page, and so the js of the carousel is re-computing the right shift correctly this time.

The caroussel is computing

the first image with

element {
    text-decoration: none;
    position: absolute;
    right: 0%;
}

and the second with

element {
    text-decoration: none;
    position: absolute;
    right: 100%;
}

but in the broken case the second had a right right: 32%;

I can imagine that the carousel might be computing too early the position of the image at the time the page is rendered.

Yes, it's a resize which triggers the right computation. i can trigger it for example by rotating the device and putting it back into portrait mode.

@hiikezoe maybe something interesting for you.

Another issue with their carousel: id="prod-item". ids are unique in an html page.

<div class="flickity-slider" style="right: 0px; transform: translateX(0%);">
    <a class="item-wrap carousel-cell is-selected" id="prod-item" href="https://malltina.com/product/mlt-605/%D9%85%D8%A7%D9%88%D8%B3-%D9%85%D8%AE%D8%B5%D9%88%D8%B5-%D8%A8%D8%A7%D8%B2%DB%8C-%D8%B1%DB%8C%D8%B2%D8%B1-%D9%85%D8%AF%D9%84-Deathadder-Elite-%D9%85%D8%AE%D8%B5%D9%88%D8%B5-%D8%A8%D8%A7%D8%B2%DB%8C-%D9%87%D8%A7%DB%8C-%D8%B1%D8%AF%D9%87-%D8%A8%D8%A7%D9%84%D8%A7--%D8%A8%D8%A7-%D9%82%D8%A7%D8%A8%D9%84%DB%8C%D8%AA-%D8%B4%D8%AE%D8%B5%DB%8C-%D8%B3%D8%A7%D8%B2%DB%8C-%D9%88-%D8%B3%D8%A7%D8%B2%DA%AF%D8%A7%D8%B1-%D8%A8%D8%A7-%D8%AA%D9%85%D8%A7%D9%85%DB%8C-%D8%AF%D8%B3%D8%AA%DA%AF%D8%A7%D9%87-%D9%87%D8%A7?_sgm_campaign=scn_6bc7eacb50240004&amp;_sgm_source=605&amp;_sgm_action=click"
    style="text-decoration: none; position: absolute; right: 0%;">
        <div class="image center-imgVid" style="    height: 180px;margin-bottom: 17px;display: flex;align-items: center;">
            <img src="https://images-na.ssl-images-amazon.com/images/I/41jN-XKYLFL._SS200_.jpg" alt="ماوس مخصوص بازی ریزر مدل Deathadder Elite مخصوص بازی های رده بالا  با قابلیت شخصی سازی و سازگار با تمامی دستگاه ها" style="max-height: 100%;max-width: 100%;">
        </div>
        <strong class="name text-truncate loading-pattern" style="direction: rtl; text-align: right;color: #4a4a4a;display: block;font-size: 13px;font-weight: 500;overflow: hidden;
                                                                  text-overflow: ellipsis;white-space: nowrap;width: 100%;">ماوس مخصوص بازی ریزر مدل Deathadder Elite مخصوص بازی های رده بالا با قابلیت شخصی سازی و سازگار با تمامی دستگاه ها</strong>
        <div class="main-price loading-pattern" id="price" style="    color: black;
    font-weight: bold;">
            <span class="tm-price" style="direction: ltr;display: inline-block;">۶۴۲,۱۰۰</span>
            <span class="tm-unit" style="padding-right: 4px;font-size: 12px;">تومان</span>
        </div>
    </a>
    <a class="item-wrap carousel-cell" id="prod-item" href="https://malltina.com/product/mlt-776113?_sgm_campaign=scn_6bc7eacb50240004&amp;_sgm_source=776113&amp;_sgm_action=click" style="text-decoration: none; position: absolute; right: 100%;" aria-hidden="true">
        <div class="image center-imgVid" style="    height: 180px;margin-bottom: 17px;display: flex;align-items: center;">
            <img src="https://images-na.ssl-images-amazon.com/images/I/31zr%2BJvRNkL._SS200_.jpg" alt="موس بازی بی سیم Razer Mamba: 16000 سنسور نوری DPI - نورپردازی Chroma RGB - 7 دکمه قابل برنامه ریزی - کلیدهای مکانیکی - عمر باتری حداکثر 50 Hr" style="max-height: 100%;max-width: 100%;">
        </div>
        <strong class="name text-truncate loading-pattern" style="direction: rtl; text-align: right;color: #4a4a4a;display: block;font-size: 13px;font-weight: 500;overflow: hidden;
                                                                  text-overflow: ellipsis;white-space: nowrap;width: 100%;">موس بازی بی سیم Razer Mamba: 16000 سنسور نوری DPI - نورپردازی Chroma RGB - 7 دکمه قابل برنامه ریزی - کلیدهای مکانیکی - عمر باتری حداکثر 50 Hr</strong>
        <div class="main-price loading-pattern" id="price" style="    color: black;
    font-weight: bold;">
            <span class="tm-price" style="direction: ltr;display: inline-block;">۹۳۵,۸۰۰</span>
            <span class="tm-unit" style="padding-right: 4px;font-size: 12px;">تومان</span>
        </div>
        <div class="discount-price" style="margin-top: -5px;line-height: 23px;text-align: center;">
            <span class="label" style="line-height: 23px;font-size: 12px;font-weight: 400;letter-spacing: -1px;text-align: right;color: black;">تخفیف:</span>
            <span class="price" style="color: #fd3d30;
    font-size: 13px;
    font-weight: 500;
    padding-left: 4px;">
                <span class="tm-price" id="discountPrice" style="direction: ltr;display: inline-block;">۷۸۶,۱۰۰</span>
                <span class="tm-unit" style="font-weight: 400;padding-right: 4px;">تومان</span>
            </span>
        </div>
    </a>

…
</div>

The computation work is done with https://cdn.segmentify.com/sliders/flickity/flickity.js?_=1581905998808

flickity is called by https://malltina.com/dist/client.js?v=gbJJWTnM07qjWotDLNtutvPM They should make sure to call it after the page has been fully loaded.

[softvision-oana-arbuzov]

The issue has been fixed. No elements are overlapped now.

Tested with: Browser / Version: Firefox Nightly 200805 (🦎 81.0a1-20200803094100) Operating System: Huawei P20 Lite (Android 8.0.0) - 1080 x 2280 pixels, 19:9 ratio (~432 ppi density), Samsung Galaxy S6 Edge (Android 7.0) - 1440 x 2560 pixels (~577 ppi pixel density)