WordPress.org

Make WordPress Core

Opened 2 years ago

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

Download all attachments as: .zip

Change History (25)

@samiamnot2 years ago

comment:1 @DrewAPicture2 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 @lancewillett2 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.

@lancewillett2 years ago

comment:3 @lancewillett2 years ago

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

comment:4 @samiamnot2 years ago

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

comment:5 @samiamnot2 years ago

  • Keywords reporter-feedback removed

comment:6 @Swaptor2 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 @lancewillett2 years ago

  • Keywords 2nd-opinion added

I can't repeat this. :|

comment:8 @philiparthurmoore2 years ago

This appears to be a WordPress.com issue.

Tested in IE10 / Windows 8

comment:9 @lancewillett2 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.

@lancewillett2 years ago

comment:10 @lancewillett2 years ago

  • Priority changed from normal to low

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

comment:12 @georgestephanis2 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 2 years ago by georgestephanis (previous) (diff)

comment:13 @georgestephanis2 years ago

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

@samiamnot2 years ago

hover over search in IE10 mode

comment:14 @samiamnot2 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 @SergeyBiryukov2 years ago

  • Milestone set to Awaiting Review

comment:16 @georgestephanis2 years ago

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

comment:17 @samiamnot2 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 @samiamnot2 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 @obenland2 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 @samiamnot2 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

.screen-reader-text:active

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

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