chinatimes.likr.com.tw - Misaligned text in the “Notification” overlay

[softvision-oana-arbuzov]

URL: https://chinatimes.likr.com.tw/chinatimes/permission.php?webuserid=f57069ea-9006-646f-698c-e81347a6085b&isSup=2&os_platform=1

Browser / Version: Firefox Mobile Nightly 58.0a1 (2017-10-04) Operating System: Google Pixel (Android 8.0.0) - 1080 x 1920 pixels (~441 ppi pixel density) Tested Another Browser: Yes

Problem type: Design is broken Description: Misaligned text in the “Notification” overlay

Steps to Reproduce:

1. Navigate https://chinatimes.likr.com.tw/chinatimes/permission.php?webuserid=f57069ea-9006-646f-698c-e81347a6085b&isSup=2&os_platform=1.
2. Observe text alignment in the “Notification” overlay.

Expected Behavior: Text is centered.

Actual Behavior: Text is misaligned.

Note:

1. Also reproducible when tapping the "Red Bell" button on the main page http://www.chinatimes.com/.
2. Reproducible on Firefox 55.0.2 Release (Mobile).
3. Not reproducible also on Chrome (Mobile) 61.0.3163.98.
4. Screenshot attached.

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

sv; country: tw

From webcompat.com with ❤️

[MDTsai]

Similar with #10359

[softvision-oana-arbuzov]

The issue is still reproducible.

Affected area:

<div id="desktop-notification">
    <img id="desktop-notification-icon" src="https://www.likr.com.tw/pushEndPoint/images/chinatimes/image/icon.png">
        <p id="x">x</p>
        <p id="desktop-notification-title">中時 想傳送推播通知給您。</p>
        <p id="desktop-notification-message">訊息會以這個形式出現</p>
        <p id="desktop-notification-url">chinatimes.likr.com.tw</p>
</div>

Modifying margin-top from 10px to 8px, the text no longer reaches the border.

#desktop-notification-title {
    font-size: 15px;
    margin-top: 10px;
    margin-bottom: 0px;
    position: relative;
    left: 10px;
}

Tested with: Browser / Version: Firefox Nightly Mobile 60.0a1 (2018-01-31) Operating System: Google Pixel (Android 8.1.0) - Resolution 1080 x 1920 pixels (~441 ppi pixel density), Samsung Galaxy S7 Edge (Android 7.0) - Resolution 1440 x 2560 pixels (~534 ppi pixel density)

[karlcow]

This relies on the default fonts being used by each browser. The logo has a fixed height and its nesting element. So depending on the font-features the height of the text will change.

Changing the line-height will make the design more robust.

[softvision-oana-arbuzov]

The issue is still reproducible.

Tested with: Browser / Version: Firefox Nightly 68.2a1 (2019-10-29), Firefox Preview Nightly 191029 (🦎: 72.0a1-20191025095546) Operating System: Huawei P20 Lite (Android 8.0.0) - 1080 x 2280 pixels, 19:9 ratio (~432 ppi density), Samsung Galaxy S7 Edge (Android 8.0.0) - Resolution 1440 x 2560 pixels (~534 ppi pixel density)

[softvision-oana-arbuzov]

This is still an issue.

Tested with: Browser / Version: Firefox Nightly 105.0a1 (🦎 105.0a1-20220727155540) Operating System: Google Pixel 5 (Android 12) - 1080 x 2340 pixels, 19.5:9 ratio (~432 ppi density), Samsung Galaxy S8 (Android 9) - 1440 x 2960 pixels, 18.5:9 ratio (~570 ppi density)

[inv_30/2022]