Recently I came across an issue in webkit browsers (Chrome, Safari but not Firefox) in one of my apps, basically the fields which had a type of number were empty in these browsers. After debugging it appears that if there is a space in the value of a number field the browser doesn’t display anything.
The below codepen embed demonstrates this better. As the data within the app was driven by an internal generated JSON feed we were able to quickly rectify by trimming the spaces out.
[codepen_embed height=300 theme_id=1 slug_hash=’pgzNVX’ user=’rachelgregory84′ default_tab=’result’ animations=’run’] See the Pen Space in number by Rachel Gregory (@rachelgregory84) on CodePen [/codepen_embed]
Luckily the browser doesn’t allow the user to add spaces client side and there’s various methods within JavaScript/ server side to ensure that the value you pass into these fields have any spaces removed. Thought I’d share as it did baffle me for a while.