WordPress.org

Make WordPress Core

Opened 4 years ago

Closed 4 years ago

#32880 closed defect (bug) (fixed)

Twenty Fifteen: don't hyphenate input elements

Reported by: lancewillett Owned by: lancewillett
Milestone: 4.3 Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: has-patch commit
Focuses: Cc:

Description (last modified by 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:

Attachments (3)

5_KD-aZWAU8dmvKD-6p9W-682Shb0YUyBZjJrNa49Q0.png (151.8 KB) - added by lancewillett 4 years ago.
32880.diff (399 bytes) - added by lancewillett 4 years ago.
32880.1.diff (407 bytes) - added by lancewillett 4 years ago.

Download all attachments as: .zip

Change History (12)

#1 @lancewillett
4 years ago

  • Description modified (diff)

This ticket was mentioned in Slack in #core-themes by lancewillett. View the logs.


4 years ago

@lancewillett
4 years ago

@lancewillett
4 years ago

#3 @lancewillett
4 years ago

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

#4 @GaryJ
4 years ago

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

#5 @lancewillett
4 years ago

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

#6 @lancewillett
4 years ago

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

#7 @GaryJ
4 years ago

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.

#8 @lancewillett
4 years ago

  • Keywords commit added

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.

#9 @lancewillett
4 years ago

  • Owner set to lancewillett
  • Resolution set to fixed
  • Status changed from new to closed

In 33093:

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

Note: See TracTickets for help on using tickets.