"text-underline-position: under" in Android Chrome doesn't work

HTML & CSS
1

Here’s a sample page:
CSS

html,
    body {
      margin: 0;
      padding: 0;
    }

    header {
      padding: 16px 0;
      text-align: center;
      background: black;
    }

    header img {
      width: 234px;
      height: 222px;
      vertical-align: bottom;
    }

    li {
      background: url('images/WhatsApp.png') no-repeat right;
      padding: 30px 50px;
      list-style: none;
    }

    a {
      font: bold 32px Calibri;
      color: black;
      text-underline-position: under;
    }

HTML

<html dir="rtl" lang="fa">
<header>
    <img src="logo.png" alt="Logo">
  </header>
  <main>
    <ul>
      <li><a href="https://chat.whatsapp.com/LyXl3gwellfIiB2V9JJXRy" title="گروه اطّلاع‌رسانی">گروه اطّلاع‌رسانی</a></li>
      <li><a href="https://wa.me/message/ZDX7YVUP6NBCJ1" title="ارسال تکالیف">ارسال تکالیف</a></li>
    </ul>
  </main>

It doesn’t look good on Android Chrome, i.e. the underline is cut off and crosses some descenders.

Here’s the final result, which I tested on the latest version of Chrome, 93:

image
image1080×2160 65.7 KB

2

Have you looked at text-underline-offset? Maybe that will help.

3

Looks like it should work in v.93 of Chrome for Android:

https://caniuse.com/mdn-css_properties_text-underline-position_under

https://caniuse.com/text-underline-offset

1 Like
4

Yes, it seems to be a bug.

1 Like
5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.