m.youtube.com - “Harassment or bullying>Choose one” drop-down menu is truncated on “Report comment” overlay

[softvision-oana-arbuzov]

URL: https://m.youtube.com/watch?v=9e4NWnCsrl8&rdm=2num221pl&noapp=1&client=mv-google Browser / Version: Firefox Mobile Nightly 56.0a1 (2017-07-05) Operating System: Google Pixel (Android 7.1.2) - 1080 x 1920 pixels (~441 ppi pixel density) Problem type: Layout is messed up

Prerequisites

1. Account created and signed in.

Steps to Reproduce

1. Navigate to: https://m.youtube.com/watch?v=9e4NWnCsrl8&rdm=2num221pl&noapp=1&client=mv-google.
2. Scroll down the page and tap the “Comments” section.
3. Tap a comment.
4. On the displayed overlay tap “Report spam or abuse”.
5. Tap “Harassment or bullying” option from “Report comment” overlay.
6. Observe “Choose one” drop-down menu.

Expected Behavior: The drop-down menu is correctly displayed and centered in the overlay.

Actual Behavior: The drop-down menu is truncated on the right side.

Note:

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

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

sv; country: de

From webcompat.com with ❤️

[karlcow]

<select id="koya_elem_494_0" class="_mzlc" style="">
    <option value="Choose one">Choose one</option>
    <option value="This is harassing me">This is harassing me</option>
    <option value="This is harassing someone else">This is harassing someone else</option>
</select>

and https://m.youtube.com/yts/jsbin/cougar-mobile-blazer-nirvana-phone-vflGstid_/core.js:formatted

  g.Ae = function (a) {
    return a && window.yterr ? function () {
      try {
        return a.apply(this, arguments)
      } catch (b) {
        g.ze(b)
      }
    }
     : a
  };

[wisniewskit]

They're adding 10px of right-padding to the <select> element, and I've no idea why. It doesn't seem to accomplish anything worthwhile in Chrome mobile, and on Firefox it only serves to make the <select> element stretch out until it goes outside of its box.

As such I'm going to call this site error, and recommend that they simply remove that CSS padding (in this file)

._mmlc {
  padding-right: 10px;
}

[karlcow]

Also Firefox doesn't receive the same markup than Chrome. This is missing on Firefox version.

body._ma ._mglc {
    background: none;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAYAAACzzX7wAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAAApSURBVAgdY/j//z9DaGjof1yYAaQABLApAMvBFKArAoljKIApgkmCaAAtOD3DvNzNYQAAAABJRU5ErkJggg==);
    background-position: right;
    background-repeat: no-repeat;
}

Adding a -moz-appearance: none to that. Then playing with padding-right: 10px.

With the padding.

Without the padding.

[karlcow]

This is contactready. Note also that in this case and with the incomplete CSS, if Mozilla implements -webkit-appearance: none, the arrow will completely go away. So this is a case where it will break things.

[karlcow]

Contacted today through the partner mailing list.

[jwatt]

This appears to work now in current Firefox. It looks like this can be closed now.

[jwatt]

Note also that in this case and with the incomplete CSS, if Mozilla implements -webkit-appearance: none, the arrow will completely go away. So this is a case where it will break things.

@karlcow This doesn't appear to be the case. If I test in Nightly with the pref layout.css.webkit-appearance.enabled set to true the dropdown still appears correctly for me. You may want to double check yourself though.

[softvision-sergiulogigan]

Hey @jwatt Tested this on Google Pixel (Android 8.1.0) - 1080 x 1920 pixels (~441 ppi pixel density) and on Firefox Nightly 63.

layout.css.webkit-appearance.enabled - FALSE

layout.css.webkit-appearance.enabled - TRUE

Looks like the site is fixed regardless of the pref.

[karlcow]

@jwatt @softvision-sergiulogigan

The markup is now on https://m.youtube.com/watch?v=9e4NWnCsrl8&rdm=2num221pl&noapp=1&client=mv-google&noapp=1#dialog

<ytm-option-selectable-item-renderer>
  <c3-material-radio>
    <input id="radio:x" type="radio" name="options:t">
    <label for="radio:x">Harassment or bullying</label>
  </c3-material-radio>
  <ytm-select>
    <select class="select" id="undefined">
      <option class="option">Choose one</option>
      <option class="option">This is harassing me</option>
      <option class="option">This is harassing someone else</option>
    </select>
    <c3-icon class="select-icon" flip-for-rtl="false">
      <svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
        <path d="M7 10l5 5 5-5z"></path>
      </svg>
    </c3-icon>
  </ytm-select>
</ytm-option-selectable-item-renderer>

with

.select {
    padding: 10px 24px 10px 0;
    margin: 0;
    border: none;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: inherit;
    background: none;
    font-size: 1.4rem;
    font-family: inherit;
    -webkit-appearance: none;
    width: 100%;
}

flipping the layout.css.webkit-appearance.enabled; to true fixes the issue with the double arrow.

I can confirm that the double arrow is still here, just not visible since https://bugzilla.mozilla.org/show_bug.cgi?id=1352238 has been implemented. The new native theme has created an arrow which by chance overlap exactly with the background-image.

You can make it visible by removing border: none for example. or by testing on the responsive design mode on desktop with firefox Android UA string (the native widget of desktop are different and more visible).

So @jwatt fixed the issue with https://bugzilla.mozilla.org/show_bug.cgi?id=1368555

Yooohoo!