Twenty Thirteen: Search field icon is missing in IE10

[samiamnot]

The magnifying glass icon is missing from the search field in IE10. The search field shows as a field unlike other browsers where it is hidden until the icon is clicked. Screenshot attached.

Can you give some more details, like what your OS version and viewport size? And if possible a live URL that we can go to to debug a bit.

I did a quick test in Windows 8, IE10 -- icon appears as expected.

Win 8, IE10. URL ​http://twentythirteendemo.wordpress.com/ various viewport sizes up to 1920x1080.

I can confirm the icon is missing in IE10 (RTM) running on windows 7 SP1, all viewports up to 1200 pixels wide.

I can't repeat this. :|

This appears to be a WordPress.com issue.

• .com: ​http://p-am.net/grabs/2013-wpcom.jpg
• /trunk/: ​http://p-am.net/grabs/2013-trunk.jpg

Tested in IE10 / Windows 8

Debugging this a bit on WP.com in IE10 on Windows 8, looks like the input type is "text" instead of "search" there.

Yes, but oddly, it only happens when browser mode is set to IE9 -- if you change it to IE10 browser mode, it works properly. Digging a bit more now.

EDIT: If you change a trunk version to IE9 browser mode manually, the problem crops up there as well. So the issue is twofold:

1) Why is the wpcom version defaulting to the IE9 browser mode?

2) Why is the IE9 browser mode changing the element to type="text" in the dom?

Alright, problem 2 is solved.

This seems to be a quirk with IE10 imitating IE9's browser mode. When it does, it resets anything that is input type="search" back to type="text" -- you can see a simplified demo here: ​http://stephanis.info/typesearch.html

Note that in IE10 in normal IE10 browser mode, it displays with a red background -- which is correct due to input[type=search] in the css. However, change it IE9 browser mode, and it swaps the type to text.

Due to this, I'm having to suggest invalid, as the input type is only being reset due to a bug in IE.

I'd also recommend someone from the wpcom team check out why it's defaulting to an IE9 browser mode over there as well -- it seems to be doing that for every wordpress.com subdomain.

hover over search in IE10 mode

The attached image (above), shows odd behavior even when forcing IE10 rendering mode. I am not sure that this should be closed.

Okiedok, I'll take a look at that issue this afternoon and follow up then.

After a little debugging I see that IE10 has wordpress.com domain listed as emulate IE9 in the ​Microsoft IE10 Compatibility View List. The specific listing is:

<domain docMode="EmulateIE9" versionVector="9" uaString="9">wordpress.com</domain>

​http://msdn.microsoft.com/en-us/library/gg699485%28v=vs.85%29.aspx#removal has directions on having the domain removed from this list. That said, the second issue is a real one when hovering over the search icon.

if there is a reason for the entire domain to render as IE9, this can be overridden in the theme with one of the following.

<meta http-equiv="X-UA-Compatible" content="IE=10" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />

@samiamnot What exactly is the "odd behavior"? If you mean the screenreader text showing up, this was fixed in r23783.

Based on your last comments this appears to be a WordPress.com issue, rather than something Twenty Thirteen would have to fix. I'm with George. Suggest closing as invalid.

Testing with r23783 shows that there is still an odd display while the mouse click on the search icon is down in IE10. Removing

.screen-reader-text:active

seems to resolve it. Should this be closed before that is resolved?

@samiamnot Good point on the :active selectors, they are not needed.

Removed in r23841