Umbraco-cms: 8.7RC Block List Editor, inline create-bar: Plus icon is not centered on Chrome

[nielslyngsoe]

In Edge this works fine, but on Chrome the plus icon is not centered. its a few pixels too low.

[bjarnef]

@nielslyngsoe I recently fixed this in https://github.com/umbraco/Umbraco-CMS/pull/8763 but maybe something else has changes or update in Chrome?

[nielslyngsoe]

@bjarnef I think your fix corrected this for Edge, but currently, it's not right in Chrome on my machine? I tried to correct this, but gave up after a short time, too many things to juggle, so that's why I put it as an error for now. But maybe you can have a double check? BTW. I´m on Chrome, Mac OS. Maybe that's the problem?

[bjarnef]

@nielslyngsoe it was looking correct in Chrome as in the gif in the PR here https://github.com/umbraco/Umbraco-CMS/pull/8763
But I noticed that after this a new update to Chrome has been released. I haven't tested in the latest though or there might be issues in other browsers.

Maybe something like line-height in the class .__plus might help?

[nielslyngsoe]

@bjarnef I did try that, I think it needs to be contained in a separate element, to align height calculations in all browsers, but might also just be mee who did it wrong, trying to be shift...

[bjarnef]

@nielslyngsoe I have tested it on a few different browsers on Windows and I can't reproduce this issue with latest changes in v8/8.7 branch.

Chrome v85.0.4183.83

Firefox v80.0.1

Microsoft Edge v44.18362.449.0

[bjarnef]

@greystate maybe you can help with this? 🧐🤔

[nielslyngsoe]

@bjarnef does indeed look correct. I just did some more testing to confirm that it's just off in MacOS.
It seems that Lato isn't identical for MacOS and Windows. Since its just a Plus icon. I´m going to change the font for this one, to one that is identical between OS.

[bjarnef]

@nielslyngsoe ahh, yes I think this one is a "+" and not a font icon. Maybe use same icon as in grid editor add-button?
https://github.com/umbraco/Umbraco-CMS/blob/v8/contrib/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.html#L266

[greystate]

@greystate maybe you can help with this? 🧐🤔

Yep - had a look last night and came to the same conclusion, that it was very hard to get the alignment correct between browsers, as the font was treated differently - even between Safari & Firefox on macOS.
Was going to suggest an SVG instead...

[nielslyngsoe]

I have now made this PR that uses the icon instead as @bjarnef suggested. Great input, thanks!
https://github.com/umbraco/Umbraco-CMS/pull/8843

[warrenbuckley]

Fixed in PR #8843 due for release in 8.7.1