Make WordPress Core

Opened 3 years ago

Closed 3 years ago

#23803 closed defect (bug) (fixed)

Twenty Thirteen: Search field icon is missing in IE10

Reported by: 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 3 years ago.
ie10-windows8.png (477.3 KB) - added by lancewillett 3 years ago.
type-text.png (670.1 KB) - added by lancewillett 3 years ago.
ie10_2.png (33.0 KB) - added by samiamnot 3 years ago.
hover over search in IE10 mode

Download all attachments as: .zip

Change History (25)

@samiamnot3 years ago

comment:1 @DrewAPicture3 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

comment:2 @lancewillett3 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.

@lancewillett3 years ago

comment:3 @lancewillett3 years ago

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

comment:4 @samiamnot3 years ago

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

comment:5 @samiamnot3 years ago

  • Keywords reporter-feedback removed

comment:6 @Swaptor3 years ago

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

comment:7 @lancewillett3 years ago

  • Keywords 2nd-opinion added

I can't repeat this. :|

comment:8 @philiparthurmoore3 years ago

This appears to be a WordPress.com issue.

Tested in IE10 / Windows 8

comment:9 @lancewillett3 years ago

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

@lancewillett3 years ago

comment:10 @lancewillett3 years ago

  • Priority changed from normal to low

comment:11 @georgestephanis3 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 3 years ago by georgestephanis (previous) (diff)

comment:12 @georgestephanis3 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: 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.

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

comment:13 @georgestephanis3 years ago

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

@samiamnot3 years ago

hover over search in IE10 mode

comment:14 @samiamnot3 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.

comment:15 @SergeyBiryukov3 years ago

  • Milestone set to Awaiting Review

comment:16 @georgestephanis3 years ago

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

comment:17 @samiamnot3 years ago

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.

comment:18 @samiamnot3 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" />

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

comment:20 @samiamnot3 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?

comment:21 @lancewillett3 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.