Make WordPress Core

Opened 11 years ago

Closed 11 years ago

#23803 closed defect (bug) (fixed)

Twenty Thirteen: Search field icon is missing in IE10

Reported by: samiamnot's profile samiamnot Owned by:
Milestone: 3.6 Priority: low
Severity: minor Version: 3.6
Component: Bundled Theme Keywords: close
Focuses: Cc:

Description (last modified by DrewAPicture)

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.

Attachments (4)

2013SearchIE10.png (29.8 KB) - added by samiamnot 11 years ago.
ie10-windows8.png (477.3 KB) - added by lancewillett 11 years ago.
type-text.png (670.1 KB) - added by lancewillett 11 years ago.
ie10_2.png (33.0 KB) - added by samiamnot 11 years ago.
hover over search in IE10 mode

Download all attachments as: .zip

Change History (25)

#1 @DrewAPicture
11 years ago

  • Description modified (diff)
  • Summary changed from Search Field in Twenty Thirteen Missing Search Icon in IE10 to Twenty Thirteen: Search field icon is missing in IE10
  • Version set to trunk

#2 @lancewillett
11 years ago

  • Keywords needs-patch reporter-feedback added
  • Milestone changed from Awaiting Review to 3.6
  • Severity changed from normal to minor

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.

#3 @lancewillett
11 years ago

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

#4 @samiamnot
11 years ago

Win 8, IE10. URL various viewport sizes up to 1920x1080.

#5 @samiamnot
11 years ago

  • Keywords reporter-feedback removed

#6 @Swaptor
11 years ago

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

#7 @lancewillett
11 years ago

  • Keywords 2nd-opinion added

I can't repeat this. :|

#8 @philiparthurmoore
11 years ago

This appears to be a issue.

Tested in IE10 / Windows 8

#9 @lancewillett
11 years ago

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

#10 @lancewillett
11 years ago

  • Priority changed from normal to low

#11 @georgestephanis
11 years ago

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?

Last edited 11 years ago by georgestephanis (previous) (diff)

#12 @georgestephanis
11 years ago

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:

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 subdomain.

Last edited 11 years ago by georgestephanis (previous) (diff)

#13 @georgestephanis
11 years ago

  • Milestone 3.6 deleted
  • Resolution set to invalid
  • Status changed from new to closed

11 years ago

hover over search in IE10 mode

#14 @samiamnot
11 years ago

  • Resolution invalid deleted
  • Status changed from closed to reopened

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

#15 @SergeyBiryukov
11 years ago

  • Milestone set to Awaiting Review

#16 @georgestephanis
11 years ago

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

#17 @samiamnot
11 years ago

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

<domain docMode="EmulateIE9" versionVector="9" uaString="9"></domain> 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.

#18 @samiamnot
11 years ago

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" />

#19 @obenland
11 years ago

  • Keywords close added; needs-patch 2nd-opinion removed

@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 issue, rather than something Twenty Thirteen would have to fix. I'm with George. Suggest closing as invalid.

#20 @samiamnot
11 years ago

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


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

#21 @lancewillett
11 years ago

  • Milestone changed from Awaiting Review to 3.6
  • Resolution set to fixed
  • Status changed from reopened to closed

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

Removed in r23841

Note: See TracTickets for help on using tickets.