www.deviantart.com - Search is not displayed correctly

[softvision-sergiulogigan]

URL: www.deviantart.com
Browser / Version: Firefox Mobile Nightly 55.0a1 (2017-04-17)
Operating System: Samsung Galaxy Note 4 (Android 5.0.1)
Problem type: Text is not visible

Steps to Reproduce

1. Navigate to: www.deviantart.com
2. Tap the Menu button. observe the Search option.

Expected Behavior:
Search string and a magnifying glass is displayed.

Actual Behavior:
Only the magnifying glass is displayed.

Notes:

1. The issue is also reproducible on on Firefox 52.0 Release (Mobile).
2. The issue is not reproducible on Chrome (Mobile) 57.0.2987.132.

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

sv; country: us

From webcompat.com with ❤️

[MDTsai]

Confirmed, "SEARCH" is placeholder of input. Color of input or background might be the root cause.

enu.mobileMenu .mobileSearch .searchWrapper input {
    border: none;
    outline: 0;
    background: 0 0;
    display: inline-block;
    color: transparent;
}

Move to needsdiagnosis.

[karlcow]

And the html is:

<span class="mobileSearch" style="width: calc(100% + 40px);">
                                <span class="searchWrapper overhead-main-menu-dropdown-search">
                                        <form method="get" autocomplete="off" id="site-search-form" class="search-form" action="http://www.deviantart.com/browse/all/" data-ga_submit_event="{&quot;category&quot;:&quot;Search&quot;,&quot;action&quot;:&quot;Loginbar&quot;}">
        <i class="icon-mag"></i>
        <a href="" class="icon-nav-close"></a>
        <input name="global" value="1" type="hidden">
        <input id="search" name="q" placeholder="SEARCH">
    </form>
                                    </span>
                            </span>

Yes the color is transparent and it is the cause in Gecko. The why this is not happening in WebKit/Blink is… mistery 🔬

AH! after one hour of searching colors and device-pixel-ratio and so on. It's a lot simpler… and SIGH.

<input placeholder="search" style="color:transparent;"/>

in WebKit and Blink, color: transparent has no effect.

From left to right Firefox, Safari, Opera:

I will open a bug on bugzilla.

[karlcow]

Opened the issue https://bugzilla.mozilla.org/show_bug.cgi?id=1357674

[karlcow]

And the codepen that I used for testing.
https://codepen.io/webcompat/pen/bWEEJv

[karlcow]

Followup on this issue, and we really need to contact them.

A discussion with @bzbarsky on the issue
https://bugzilla.mozilla.org/show_bug.cgi?id=1357674
opened my eyes on something I had missed.

In the CSS
http://st.deviantart.net/roses/cssmin/mobile-header.css?1487067424177

they define the placeholder pseudo-selector

menu.mobileMenu .mobileSearch .searchWrapper input:focus::-webkit-input-placeholder {
	opacity:0
}
menu.mobileMenu .mobileSearch .searchWrapper input:focus::-moz-input-placeholder {
	opacity:0
}
menu.mobileMenu .mobileSearch .searchWrapper input::-webkit-input-placeholder {
	font-family:Calibre-Bold;
	font-size:72px;
	line-height:72px;
	color:rgba(255,255,255,.5)
}
menu.mobileMenu .mobileSearch .searchWrapper input::-moz-input-placeholder {
	font-family:Calibre-Bold;
	font-size:72px;
	color:rgba(255,255,255,.5)
}

So the combination of transparent and the error in the selector makes it fail.

They use ::-moz-input-placeholder instead of ::-moz-placeholder . It's why it fails.

Once I change to the right value, I get:

Note that it would be even better if they were just doing

menu.mobileMenu .mobileSearch .searchWrapper input:focus::-webkit-input-placeholder {
	opacity:0
}
menu.mobileMenu .mobileSearch .searchWrapper input:focus::placeholder {
	opacity:0
}
menu.mobileMenu .mobileSearch .searchWrapper input::-webkit-input-placeholder {
	font-family:Calibre-Bold;
	font-size:72px;
	line-height:72px;
	color:rgba(255,255,255,.5)
}
menu.mobileMenu .mobileSearch .searchWrapper input::placeholder {
	font-family:Calibre-Bold;
	font-size:72px;
	color:rgba(255,255,255,.5)
}

The support is across the board. http://caniuse.com/#feat=css-placeholder and probably add the value for Edge.

Or maybe Edge is aliasing the -webkit- Do you remember @miketaylr ?

[karlcow]

I wonder if @metamode or @ArtBIT can put us in contact with people in charge of @DeviantArt CSS for mobile so we can fix the issue that users on Firefox Mobile are hitting.

[ArtBIT]

Thanks for investigating and practically solving this issue :)
Formal procedure for reporting issues is through our help desk contact form, but I will open an internal ticket to fix this issue.
Thanks again!

TIL about webcompat.com - it's an amazing concept, keep it up!

[karlcow]

Thanks a lot @ArtBIT . Appreciated.

[wisniewskit]

@karlcow, this seems to be working correctly on my phone now.

[karlcow]

yup this has been fixed.