Byrne: Post comment button is not visible

[devNigel]

Quick summary

On mobile, the "Post comment" button is not visible. You have to hover or press over it to appear. I was able to reproduce it on Simple sites.

On Atomic sites, the comment form in mobile are different than the come in simple sites.

Steps to reproduce

1. Activate Byrne theme on a simple site.
2. Visit a post or page with comments enabled on a mobile device.
3. You will notice that the Post Comment button is invisible, you'll have to press over the area for it to show up.

Video recording:

What you expected to happen

The "Post Comment" button should be visible.

What actually happened

The "Post Comment" button was invisible.

Context

Chat: 34145071 Followup: 4864792-zen

Simple, Atomic or both?

Simple

Theme-specific issue?

Byrne

Browser, operating system and other notes

No response

Reproducibility

Consistent

Severity

Most (> 50%)

Available workarounds?

No but the platform is still usable

Workaround details

You can provide the following CSS code.

/* Style post comment button SS-xxxx-zen */

.wp-block-post-comments input[type=submit] {
   border: 1px solid #ccc;
   color: #fff;
   background: #000;
}

[jp-imagines]

Came across a similar issue. Unsure if it's related – if it's a separate issue, let me know and I'll report it separately. (cc @Robertght)

Also in the Byrne theme, the "Donate" button (on the Donations Form block) has a white background with white text until hovered over. This is particularly troublesome, as the button is inactive (and can't be hovered over) until a donation amount is specified – until then, there's absolutely no way to see the "Donate" button.

It looks like the variable used to define the background color for buttons isn't set, based on what I see in the browser console:

--wp--custom--button--color--background is not defined

Workaround CSS:

.wp-block-button__link {
   background: #000000;
}

Context: 5297118-zd-woothemes

[tellisbethel]

Another instance of this here: 36298657-hc Follow up ticket: 5445832-zd-woothemes

[happychait]

Another report in 5616057-zen

[github-actions[bot]]

Support References

This comment is automatically generated. Please do not edit it.

• [ ] 4864792-zen
• [ ] -zen
• [ ] 5297118-zen
• [ ] 5445832-zen
• [ ] 5616057-zen
• [ ] 5912717-zen
• [ ] 5984017-zen
• [ ] 6008739-zen

[jp-imagines]

Came across another instance in 5912717-zd-woothemes. Gave the CSS below as a more specific counter to the CSS already being used with the missing variable:

.wp-block-button .wp-block-button__link:not(:is(:hover, :active, :focus)) {
   border-color: #000000;
   color: #ffffff;
   background: #000000;
}

[zdenys]

5984017-zd-woothemes Provided the CSS workaround.

[nicolynramos]

Another here: 6008739-zen Also noting on related issue here. CSS workaround provided.