www.shadertoy.com - invisible text in search box Topic is solved

For support with specific websites

Moderator: trava90

Forum rules
Please always mention the name/domain of the website in question in your topic title.
Post Reply
User avatar
UCyborg
Apollo supporter
Apollo supporter
Posts: 42
Joined: 2019-01-10, 09:37

www.shadertoy.com - invisible text in search box

Post by UCyborg » 2020-06-27, 16:59

Happens in safe mode as well, on different machines.

User avatar
Moonchild
Pale Moon guru
Pale Moon guru
Posts: 27354
Joined: 2011-08-28, 17:27
Location: 58°2'16"N 14°58'31"E
Contact:

Re: www.shadertoy.com - invisible text in search box

Post by Moonchild » 2020-06-27, 22:53

Web design issue:

Code: Select all

input#mySearch[type="search"] {
    width: 100%;
    border-radius: 6px;
    border: 1px solid black;
    padding: 12px;
}
input#mySearch {
    width: 300px;
    left: 21px;
    height: 22px;
    border-radius: 6px;
    padding-left: 8px;
    padding-right: 8px;
Input element is 22px high/ Padding is 12px top+bottom = 24 px total => no room for searched text => it isn't displayed.
"There will be times when the position you advocate, no matter how well framed and supported, will not be accepted by the public simply because you are who you are." -- Merrill Rose
Image

User avatar
UCyborg
Apollo supporter
Apollo supporter
Posts: 42
Joined: 2019-01-10, 09:37

Re: www.shadertoy.com - invisible text in search box

Post by UCyborg » 2020-06-28, 03:17

Do browsers such as modern Firefox and Chrome interpret this wrong? IE11 is the only one that shows it the same as UXP browsers with invisible text. Opera 12 on the other hand enlarges the search box in height, the text remains visible.

If I modify the first block of CSS code by specifying height = 26px and changing padding to padding-left, it appears fine in UXP browsers. Would this be technically correct fix?

User avatar
Moonchild
Pale Moon guru
Pale Moon guru
Posts: 27354
Joined: 2011-08-28, 17:27
Location: 58°2'16"N 14°58'31"E
Contact:

Re: www.shadertoy.com - invisible text in search box

Post by Moonchild » 2020-06-28, 09:44

UCyborg wrote:
2020-06-28, 03:17
Do browsers such as modern Firefox and Chrome interpret this wrong?
Yes. This has been a long-standing bug in Chrome, and since Mozilla just copies what Chrome does, they do it wrong too now.

HTML elements 101
html-elements-101.png
html-elements-101.png (8.36 KiB) Viewed 151 times
If you fill the area within the border with padding, there is no room for content. Padding and content can't take the same space (compare to real life. if you fill a bag with nothing but packaging material, you can't put anything else in)
UCyborg wrote:
2020-06-28, 03:17
If I modify the first block of CSS code by specifying height = 26px and changing padding to padding-left, it appears fine in UXP browsers. Would this be technically correct fix?
No. The correct fix would be to set the desired height they are trying to enforce with padding (24px) on the item and removing the padding line altogether. In the second block (resolution-dependent) padding-left and -right are already specified (which get overridden by the way). In fact the second block should only contain the styling that changes per resolution (in this case the width, but possibly position as well if the design asks for it) and the rest should be moved to the first block, correctly styling the box otherwise.
So something like:

Code: Select all

input#mySearch[type="search"] {
    left: 21px;
    width: 100%;
    height: 24px;
    border-radius: 6px;
    border: 1px solid black;
    padding-left: 8px;
    padding-right: 8px;
    }
@media(...) input#mySearch {
    width: 300px;
}
"There will be times when the position you advocate, no matter how well framed and supported, will not be accepted by the public simply because you are who you are." -- Merrill Rose
Image

User avatar
Tomaso
Board Warrior
Board Warrior
Posts: 1479
Joined: 2015-07-23, 16:09
Location: Norway

Re: www.shadertoy.com - invisible text in search box

Post by Tomaso » 2020-06-28, 10:12

The site clearly states that it's in the BETA stage, so they'd probably listen to your feedback.
If not, you can use this rule in uBO, to work around the issue:

Code: Select all

shadertoy.com###mySearch:style(height: 43px !important;)
(the "px" value can be modified further, if it doesn't fix the issue for your specific screen resolution)

User avatar
UCyborg
Apollo supporter
Apollo supporter
Posts: 42
Joined: 2019-01-10, 09:37

Re: www.shadertoy.com - invisible text in search box

Post by UCyborg » 2020-06-28, 12:13

Thanks for the answers! The beta status in this case reminds a bit of Gmail that was marked beta for several years as well.

The issue in this case must have appeared with updates to the site, so reporting it to the authors(s) would be the best course of action.

Post Reply