JSON Formatting on Sharepoint List Web Part Not Working Correctly

[dmowry]

I have a SharePoint list with a bunch of contacts. I have setup the list to have some JSON formatting done so the list will appear in card view. I get things looking correctly within the list just fine, however, when I go to add the webpart and pick my formatted view, the cards display correctly all except the very first row (see attached). 

I came across the following post for JSON formatting on SharePoint and there is a known bug, I wondered if this could be related or if I have something wrong in my JSON.

https://techcommunity.microsoft.com/t5/SharePoint/JSON-Formatting-on-Sharepoint-start-site/m-p/30977...

I am also having a problem when referencing the People field (User in my case), I do not return the user's title. So in my example below $User.jobTitle should pull in the user's title, but i get nothing. $User.email and $User.title work just fine. Any ideas?

{
"schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
"hideSelection": true,
"hideListHeader": true,
"rowFormatter": {
"elmType": "div",
"style": {
"float": "left",
"display": "flex",
"flex-wrap": "wrap",
"flex-direction": "column",
"align-items": "center",
"justify-content": "space-around",
"min-width": "245px",
"min-height": "286px",
"border-radius": "8px",
"margin-right": "10px",
"margin-bottom": "10px",
"box-shadow": "2px 2px 4px darkgrey"
},
"attributes": {
"class": "ms-bgColor-neutralLighter"
},
"children": [
{
"elmType": "div",
"children": [
{
"elmType": "img",
"style": {
"display": "block",
"height": "auto",
"max-height": "144px",
"max-width": "144px",
"border-radius": "50%"
},
"attributes": {
"src": "=if([$Picture] == '', @currentWeb + '/_layouts/15/userphoto.aspx?size=M', [$Picture])",
"title": "=if([$Picture] == '', 'No picture available', [$Picture.desc])"
}
}
]
},
{
"elmType": "div",
"style": {
"text-align": "center"
},
"children": [
{
"elmType": "div",
"style": {
"font-weight": "500",
"font-size": "1.5rem"
},
"txtContent": "[$User.title]"
},
{
"elmType": "div",
"style": {
"font-weight": "500",
"font-size": "1.1em",
"overflow": "auto",
"max-width": "200px",
"white-space": "normal"
},
"txtContent": "[$User.email]"
}
]
},
{
"elmType": "div",
"children": [
{
"elmType": "span",
"style": {
"height": "2rem",
"width": "2rem",
"font-size": "2em",
"cursor": "pointer",
"margin": "0px 5px",
"vertical-align": "text-bottom"
},
"children": [
{
"elmType": "a",
"style": {
"cursor": "pointer"
},
"attributes": {
"class": "ms-fontColor-themePrimary",
"iconName": "CreateMailRule",
"href": "='mailto:' + [$User.email]"
}
}
]
}
]
}
]
}
}

[#2]

@dmowry Shouldn't schema have a $ before it? as in... 

{
    "$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
    "hideSelection": true,
    "hideColumnHeader": true,
    "rowFormatter": {....