-
Notifications
You must be signed in to change notification settings - Fork 265
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Bug] -webkit-appearance: none
breaks embedded form styling
#390
Labels
bug
Something isn't working
Comments
@rootwork, |
That makes sense. So I can think of two options:
|
@rootwork, I agree ... either of those approaches is good. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I confirm:
Hugo version
hugo v0.100.2-d25cb2943fd94ecf781412aeff9682d5dc62e284+extended linux/amd64 BuildDate=2022-06-08T10:25:57Z VendorInfo=gohugoio
Where is this bug showing up?
In the browser: Hugo builds the site, but something doesn't look right.
Operating system
Linux Mint 20.3
Browser (if applicable)
Firefox 105.0.1
Current behavior
This line in the base Sass file sets every element to
-webkit-appearance: none
.I'm not sure what that was included for (it's been there since the beginning), but it renders all form fields mysteriously invisible. It took me awhile to track it down because it was waaaaay down at the bottom of the style cascade on the inspector. I only noticed this issue because I tried embedding an email newsletter signup form, and checkboxes weren't showing up.
Expected behavior
Checkboxes and other form fields should show up as normal when an end-user tries embedding them in a post or customizing a layout template.
Given that it affects checkboxes, maybe it was for the light/mode-switch implementation? Regardless, whatever it was meant for it should be applied more specifically to those elements, not across every element in the DOM.
Steps to reproduce
Spin up the example site, open
content/about.md
and enter something like this in the body content:When the page re-renders you'll see some margins for the checkboxes, but the elements themselves will be invisible. (They are there in the DOM if you inspect it.)
Unchecking
-webkit-appearance: none
will cause them to appear -- though they're tiny, and I can't tell what in the CSS is causing that. If you add a height/width or min-height/min-width to them then they'll behave as normal.Related code
https:/chipzoller/hugo-clarity/blame/master/assets/sass/_base.sass#L3
Other information
@onweru Do you know what elements that line of CSS was meant to affect?
The text was updated successfully, but these errors were encountered: