The UI engine has a number of quirks, this file tries to document some of them.
- The top of the screen gets cut off by about 4 pixels
- Fonts act a bit weird. Some elements will inherit the font-family of their parent, while others like buttons do not. Also, there doesn't seem to be a fallback font (or it's not working on my system) because anything without a font-family (or set to an invalid font-family) does not render text.
- The sprite used for the border image must be smaller than the element's rendered size (It must be able to tile itself at least once), otherwise part of the border gets cut off (See https://p.cp3.es/ss1579466973-1216.png vs https://p.cp3.es/ss1579467100-4d96.png)
- The sprite can't be too small, otherwise it will cause a ton of lag when re-drawing (for ex, when resizing the screen). This lag is caused by excessive tiling and seems to increases exponentially with window size.
- All
<input>types show a text input, except fortype="button"which crashes the game. - An input's
background-imageandborder-imagedisappears when it looses focus. The easiest way I've found to fix this is to turn it off and back on again. And by that I mean detaching and reattaching the element to the DOM usingelement.parentNode?.replaceChild(element, element);.
- For some objects
Object.getPrototypeOf()throws an unexpected "Illegal invocation" exception - Node lists are not iterable (they don't have a
Symbol.iterator), which means you can't use the spread operator on them. This means if you want to loop over or spread aNodelistyou need to turn itinto an array usingArray.from(nodeList). <Element>.style.*properties can not be unset.- Using
<Element>.setAttribute()and related methods does not update styles using attribute selectors. This can be fixed by changing a class or reattaching the element to the DOM.