WordPress.org

Make WordPress Core

Opened 13 months ago

Closed 13 months ago

Last modified 13 months ago

#38939 closed defect (bug) (fixed)

Twenty Seventeen: input backgrounds are only styled for webkit browsers

Reported by: Clorith Owned by: laurelfulford
Milestone: 4.7 Priority: normal
Severity: normal Version: 4.7
Component: Bundled Theme Keywords: has-patch commit dev-reviewed
Focuses: Cc:

Description

The styles for inputs are all styled with background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), this means there are situations where you may end up with dark text on dark backgrounds, for example when working with high contrast computer setups.

We need a fallback for non-webkit browsers here, Twenty Sixteen does this by defining background: #f7f7f7

Originally reported by @schamane in https://wordpress.org/support/topic/twentyseventeen-input-fields-unreadable-on-reversed-screens/

Attachments (1)

38939.diff (502 bytes) - added by Presskopp 13 months ago.

Download all attachments as: .zip

Change History (12)

#1 follow-up: @Presskopp
13 months ago

found this in 2015, reason for double color gradient:

/* Removing the inner shadow on iOS inputs */

#2 in reply to: ↑ 1 @schamane
13 months ago

Replying to Presskopp:

found this in 2015, reason for double color gradient:

/* Removing the inner shadow on iOS inputs */

@Presskopp Thank you for digging this up!

@Presskopp
13 months ago

#3 @Presskopp
13 months ago

  • Keywords has-patch added

Patch imitating Twenty Sixteen, using #fff, not #f7f7f7, because it would be nowhere else to find in Twenty Seventeen.

Last edited 13 months ago by Presskopp (previous) (diff)

#4 @davidakennedy
13 months ago

  • Milestone changed from Awaiting Review to 4.7
  • Owner set to laurelfulford
  • Status changed from new to assigned

This is something that definitely should be fixed. I want to note that we'll need to also ensure any color changes also work with the color schemes.

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


13 months ago

#6 @davidakennedy
13 months ago

  • Keywords commit added

After further discussion with @laurelfulford on this, we’re only using a linear gradient to override Safari’s default styles. The dark scheme already has the necessary color override, so we're good there.

So thanks for the patch @Presskopp! It looks good to go.

This ticket was mentioned in Slack in #core by davidakennedy. View the logs.


13 months ago

This ticket was mentioned in Slack in #core by helen. View the logs.


13 months ago

#9 @helen
13 months ago

  • Keywords dev-reviewed added

#10 @davidakennedy
13 months ago

  • Resolution set to fixed
  • Status changed from assigned to closed

In 39388:

Twenty Seventeen: Provide a background color fallback for non-webkit browsers on input styles

This allows the styles to work correctly when modified by high contrast computer setups.

Props presskopp.

Fixes #38939.

#11 @ocean90
13 months ago

In 39389:

Twenty Seventeen: Provide a background color fallback for non-webkit browsers on input styles

This allows the styles to work correctly when modified by high contrast computer setups.

Merge of [39388] to the 4.7 branch.

Props presskopp.
See #38939.

Note: See TracTickets for help on using tickets.