www.go-jek.com - design is broken

[reinhart1010]

URL: https://www.go-jek.com/contact/

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

Problem type: Design is broken
Description: Overlapping dropdown
Steps to Reproduce:

1. Visit the site

Not Reproducible in:

1. Chrome 67, Android 7.0

From webcompat.com with ❤️

[softvision-sergiulogigan]

I can also reproduce this on Huawei P9 Lite (Android 6.0).

The affected area is

<div class="select--wrapper" id="faq-menu--list" data-menu="menu-list">
		<div class="bg--select"></div>
		<select id="faqMobileMenu">
        <option value="faq" data-val="faq">FAQ</option>
        <option value="terms-and-condition" data-val="terms-and-condition">Terms and Condition</option>
        <option value="privacy-policies" data-val="privacy-policies">Privacy Policy</option>
        <option value="contact" data-val="contact" selected="selected">Contact Us</option>
    </select>
	</div>

[karlcow]

Another font related issue. pure-g is specified on the header before, but it affects only select

.pure-g {
	letter-spacing: -.31em;
	text-rendering: optimizespeed; 
	font-family: FreeSans,Arimo,Droid Sans,Helvetica,Arial,sans-serif; 
	display: -ms-flexbox;
	display: flex;
	-ms-flex-flow: row wrap;
	flex-flow: row wrap;
	-ms-flex-line-pack: start;
	align-content: flex-start;
}

The letter spacing here is trying to reduce the distance between characters.

The letter spacing here is translated in pixel to

-4.96667px

while it falls back to normal in Chrome. hmm strange.

I made a test case and it behaves normally
https://codepen.io/webcompat/pen/YjjevN

so there is something else.
ah there is a

.pure-u, .pure-u-1, .pure-u-1-1, .pure-u-1-2, .pure-u-1-3, .pure-u-1-4, .pure-u-1-5, .pure-u-1-6, .pure-u-1-8, .pure-u-1-12, .pure-u-1-24, .pure-u-2-3, .pure-u-2-5, .pure-u-2-24, .pure-u-3-4, .pure-u-3-5, .pure-u-3-8, .pure-u-3-24, .pure-u-4-5, .pure-u-4-24, .pure-u-5-5, .pure-u-5-6, .pure-u-5-8, .pure-u-5-12, .pure-u-5-24, .pure-u-6-24, .pure-u-7-8, .pure-u-7-12, .pure-u-7-24, .pure-u-8-24, .pure-u-9-24, .pure-u-10-24, .pure-u-11-12, .pure-u-11-24, .pure-u-12-24, .pure-u-13-24, .pure-u-14-24, .pure-u-15-24, .pure-u-16-24, .pure-u-17-24, .pure-u-18-24, .pure-u-19-24, .pure-u-20-24, .pure-u-21-24, .pure-u-22-24, .pure-u-23-24, .pure-u-24-24 {
	letter-spacing: normal;
	word-spacing: normal;
	vertical-align: top;
	text-rendering: auto;
	display: inline-block;
	zoom: 1;
}

which reverts the previous letter-spacing, but that's not it in the case of chrome.
the letter-spacing: normal comes from… the chromium user agent stylesheet.

I guess we can't override in chrome the letter-spacing.

input, textarea, select, button {
    text-rendering: auto;
    color: initial;
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: start;
    margin: 0em;
    font: 400 13.3333px Arial;
}

yeah that's it. I have added a testcase to the previous one.
https://codepen.io/webcompat/pen/YjjevN

Let's make a proper one.

[karlcow]

Chrome user agent stylesheet

input, textarea, select, button {
    text-rendering: auto;
    color: initial;
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: start;
    margin: 0em;
    font: 400 13.3333px Arial;
}

In this codepen I have done instead:
https://codepen.io/webcompat/pen/oMMqNW

.spacing {
    text-rendering: optimizespeed;
    color: red;
    letter-spacing: -.2em;
    word-spacing: 10em;
    text-transform: capitalize;
    text-indent: 50px;
    text-shadow: 2px 2px;
    display: inline-block;
    text-align: right;
    margin: 2em;
    font: 400 13.3333px Arial;
}

This is the rendering in Firefox.

and the rendering in Chrome.

For certain values, Chrome seems to ignore the parameters.

Let's see where the values are applied

in button and select only

• text-rendering: firefox
• color: none
• letter-spacing: firefox
• word-spacing: firefox
• text-transform: firefox
• text-indent: none
• text-shadow: none
• display: none
• text-align: none
• margin: both

[karlcow]

I opened https://bugzilla.mozilla.org/show_bug.cgi?id=1481112
but we should contact them to change the CSS.
They get away with Chrome because chrome ignores the rule they have set on the letter-spacing.

They could add.

input, textarea, select, button {
    letter-spacing: normal;
}

[reinhart1010]

Trying to re-contact Go-jek via Twitter

[reinhart1010]

Got a response from Go-jek

https://twitter.com/gojekindonesia/status/1026442325663342592?s=19

[softvision-oana-arbuzov]

The issue is still reproducible on my side.

Tested with:
Browser / Version: Firefox Nightly 68.0a1 (2019-06-24), Fenix 1.0.1926 (Build #11761827 🦎 68.0-20190612114833)
Operating System: LG G5 (Android 8.0.0) - 1440 x 2560 pixels (~554 ppi pixel density), Samsung Galaxy S7 Edge (Android 8.0.0) - Resolution 1440 x 2560 pixels (~534 ppi pixel density)

[softvision-sergiulogigan]

This is still reproducible on Firefox Nightly 68.3a1 (2019-11-09)
but not on Firefox Preview Nightly 191109 (🦎: 72.0a1-20191105095755)

[reinhart1010]

I can also see that this issue has been resolved in Firefox 70 Desktop (Linux / Ubuntu 18.04). should we close this as fixed (though there's no guarantee that this fix will ship to current Fennec users)?

[softvision-oana-arbuzov]

@karlcow should we close this since it is no longer reproducible on Firefox Preview Nightly 200113 (🦎 74.0a1-20200110095023)?

[karlcow]

yup.