Web-bugs: connect.detik.com - Image is displayed copped on user profile page

[softvision-oana-arbuzov]

URL: https://connect.detik.com/dashboard/public/mozilianulb

Browser / Version: Firefox Mobile Nightly 59.0a1 (2017-11-27)
Operating System: Huawei P10 (Android 7.0) - Resolution 1080 x 1920 pixels (~432 ppi pixel density)
Tested Another Browser: Yes

Problem type: Design is broken
Description: Image is displayed copped on user profile page

Prerequisites

1. Account created and signed in.

Steps to Reproduce

1. Navigate https://connect.detik.com/dashboard/public/mozilianulb .
2. Tap the “Browse” menu button.
3. Tap the user.
4. Observe the image under the navigation bar.

Expected Behavior:
Image is fully displayed.

Actual Behavior:
Image is cropped.

Note:

1. Reproducible on Firefox 57.0 Release (Mobile).
2. Not reproducible on Chrome (Mobile) 62.0.3202.84.
3. Screenshot attached.

Watchers:
@softvision-sergiulogigan
@softvision-oana-arbuzov

sv; country: id

_From webcompat.com with ❤️_

[karlcow]

I have the feeling the domain name for this issue is https://connect.detik.com/dashboard/public/mozilianulb?

[karlcow]

The markup

<div class="cover">
            <div class="box_cover">
                <img src="https://connect.detik.com/assets/images/coverheader.jpg" onerror="this.src='https://connect.detik.com/assets/images/coverheader.jpg'">
            </div>
        </div>

[karlcow]

This is happening only on Firefox Android on device not on RDM.

ok I can reproduce on RDM when I set the font to be "Clear Sans" on the header menu

   <div id="header_menu">
        <a href="/dashboard/public/mozilianulb/profile?ui=m">Profil</a>
        <a class="selected" href="/dashboard/public/mozilianulb?ui=m">Aktivitas</a>
        <a href="/dashboard/public/mozilianulb/badge?ui=m">Badge</a>
    </div>

With the normal font: helvetica

<a class="selected" href="/dashboard/public/mozilianulb?ui=m">Aktivitas</a>

is 33.5px high.

but when it uses Clear Sans, the box is 38px high, the orange is below the menu and then reduce the space for the image which is set at 100% of the remaining space.

Adding a display: flex on #header_menu will fix the issue and it will also make the float:left on a useless.

#header_menu a {
    color: #fff;
    /* float: left; */
    padding: 9px 2px 8px 2px;
    text-decoration: none;
    width: 32%;
}

So basically.

#header_menu {
    background: #1a387d none repeat scroll 0 0;
    color: #fff;
    font-size: 13px;
    height: 36px;
    text-align: center;
    text-transform: uppercase;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

#header_menu a {
    color: #fff;
    padding: 9px 2px 8px 2px;
    text-decoration: none;
}

will solve it nicely.

[adamopenweb]

Reaching out by email to [email protected]

[reinhart1010]

@adamopenweb Detik.com is an Indonesian news website, so please try not to be too technical in explaining the fix to this problem.

[adamopenweb]

No response so far, let's set back to needscontact.

[adamopenweb]

@reinhart1010 are you able to speak Indonesian? If so, would you be interested in contacting them?

[reinhart1010]

@adamopenweb Yes, while it's quite difficult to properly contact for technical support in some Indonesian news websites.

Instead, I will try to contact the Editor team for this issue, issues #12991 (Tribunnews.com), #13071 (Merdeka.com) and #13200 (KapanLagi). These are also Indonesian news websites.

[adamopenweb]

That's great thanks @reinhart1010!

Once you have, we can switch the status to sitewait.

[reinhart1010]

Contacted via Twitter (in Indonesian):

https://twitter.com/ReinPre10/status/981890589137420288

[cipriansv]

After retesting the issue I confirm that the issue has been fixed.

Tested with:
Browser / Version: Firefox Nightly 68.0a1 (2019-06-21), Firefox Fenix (Preview) 1.0.1926
Operating System: Huawei P10 (Android 8.0) - 1080 x 1920 pixels (~432 ppi pixel density)