Twenty Fifteen: don't hyphenate input elements

[lancewillett]

In Safari, if you enter a long text string into an input element, and remove the focus away from it, the result gets truncated with hyphens.

Reported in Slack by @lucijanblagonic

I'd like to report a bug with Twenty Fifteen theme (hope this is the right channel).

Test: Copy a really long string (e.g. "this.is.a.really.long.string@…") into input field and remove focus from the element (click anywhere on the page). Tested here ​https://wordpress.org/themes/twentyfifteen/

Browser: Safari (latest)

Solution: Remove hyphenation from input elements (don't forget to add vendor prefixes)

Screenshot:

[lancewillett]

.1 is a better solution -- first patch changed the font family on input elements.

[GaryJ]

I can replicate the issue.

-webkit-hypens: none;

does appear to fix.

If the bug is only on Safari, is there any benefit in introducing extra vendor-prefixed properties?
​http://caniuse.com/#feat=css-hyphens

[lancewillett]

Yes, we use vendor prefixes already (see the patch).

[lancewillett]

However, it's better to apply to all browsers and not target just Safari. Future-thinking.

[GaryJ]

I get the need for consistency, but this is behaviour I've not seen before. Other browsers don't seem to exhibit it.

Looking into it further, it seems to be inheriting it from the .widget{} ruleset. Changing the field type from search to text has no effect, and I can't reproduce in comment form fields. Disabling in .widget{} stops it though, so I'd rather see the application of hyphen styles being a bit more selective, to paragraphs, headings, list items and other textual elements, rather than to a block container.

According to ​https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens, the hyphens property (CSS3 Working Draft) is supposed to be inherited, but that just suggests that blindly adding it to a container element may cause further problems that have not yet manifested.

In short, IMHO it would be better to fix the cause, and not the symptom.

[lancewillett]

Let's stick with the patch as it is; a bit too complicated for this minor release (with WP 4.3 cycle) to redo the widget selector and test everything that would or could break as a result.

[lancewillett]

In 33093:

Twenty Fifteen: don't hyphenate input elements. Fixes #32880.