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

[UCyborg]

Happens in safe mode as well, on different machines.

[Moonchild]

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.

[UCyborg]

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?

[Moonchild]

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

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)

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;
}

[Tomaso]

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)

[UCyborg]

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.