Closed Bug 578899 Opened 14 years ago Closed 10 years ago

github search box looks bad

Categories

(Web Compatibility :: Site Reports, defect)

x86
All
defect
Not set
normal

Tracking

(Not tracked)

RESOLVED WORKSFORME

People

(Reporter: jrmuizel, Unassigned)

References

()

Details

Attachments

(3 files)

If you look at http://github.com/graydon/rust/issues it seems to have overlapping text in the search box
This is a bug in the site.  It basically has:

  <input placeholder="Search..." class="notnative placeholder">

and when you click in the control they remove the class.  The styling attached to those classes is:

  .notnative { 
    background-image: url("/images/modules/header/search_field.gif");
    background-position: 0pt -22px;
  }
  .notnative.placeholder { background-position: 0 0; }

When the control is clicked on, the site removes the "placeholder" class.

So what you see is the text in that "placeholder" attribute painting on top of the search_field.gif background, which you can find at http://github.com/images/modules/header/search_field.gif

Now the page only does the business with the background (by setting the "nonnative" class) if the "onsearch" property of the input is not of type "object".  It's only of type "object" in webkit; it's some nonstandard DOM extension webkit seems to have.

So the upshot is that all non-webkit browsers get the background stuff, and if any of them happen to implement the placeholder attribute (which we do), you get the bogus rendering.

Over to tech evangelism.  If you have a contact with the site, please let them know they should stop browser-sniffing, especially using bogus detection strategies (e.g. once we implement native type="search" their site will _really_ be broken, since it won't use the native search styling and will instead use their own thing).
Assignee: nobody → english-us
Component: Editor → English US
Product: Core → Tech Evangelism
QA Contact: editor → english-us
Version: Trunk → unspecified
I meant "When you click in the control they remove the 'placeholder' class".
The _right_ way to do the "nonnative" class is to set "nonnative" only if 

  var test = document.createElement("input");
  "placeholder" in test

tests false.  That would actually sniff for support for placeholders, as opposed to some other totally unrelated thing.
Looks to me like they fixed it.
Status: NEW → RESOLVED
Closed: 14 years ago
Resolution: --- → WORKSFORME
Sigh.  Only the main search box was fixed.  Reopening.
Status: RESOLVED → REOPENED
Resolution: WORKSFORME → ---
David, can you reopen the github issue too, since they seem to consider this fixed?
Actually, I can't (just not part of their workflow for "discussion").  I filed a followup bug a while back though, but I don't know where it is.
Mac, 17.0.1; go to GitHub.com (log in), type mozilla-b2g (for example) into the search field and press enter. This is what you see until the search is completed.
Same problem on Windows as well.
OS: Mac OS X → All
Well, sure.  Again, this is a bug in Github's site, because they're doing broken UA sniffing and sending us bogus styles.  If you want it fixed, please complain to Github!
No issue for me. Firefox 32. Mac.
Assignee: english-us → nobody
Status: REOPENED → RESOLVED
Closed: 14 years ago10 years ago
Component: English US → Desktop
Resolution: --- → WORKSFORME
Product: Tech Evangelism → Web Compatibility
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: