XF 2.0 Change the avatar border radius to 50% could break layout

[truonglv]

As the title when I change the border radius of avatar to 50% through style properties it's break layout.

 

[truonglv]

When i use that value some exceptions was throw.

[LIST]
[*]Less_Exception_Compiler: error evaluating function `max` incompatible types index: 37531
[*]src/vendor/oyejorge/less.php/lib/Less/Tree/Call.php:80
[*]Generated by: Unknown account
[*]Jun 3, 2018 at 11:44 AM
[/LIST]
[SIZE=5][B]Stack trace[/B][/SIZE]
#0 src/vendor/oyejorge/less.php/lib/Less/Tree/Expression.php(42): Less_Tree_Call->compile(Object(Less_Environment))
#1 src/vendor/oyejorge/less.php/lib/Less/Tree/Value.php(27): Less_Tree_Expression->compile(Object(Less_Environment))
#2 src/vendor/oyejorge/less.php/lib/Less/Tree/Rule.php(75): Less_Tree_Value->compile(Object(Less_Environment))
#3 src/vendor/oyejorge/less.php/lib/Less/Tree/Ruleset.php(94): Less_Tree_Rule->compile(Object(Less_Environment))
#4 src/vendor/oyejorge/less.php/lib/Less/Tree/Ruleset.php(94): Less_Tree_Ruleset->compile(Object(Less_Environment))
#5 src/vendor/oyejorge/less.php/lib/Less/Tree/Ruleset.php(94): Less_Tree_Ruleset->compile(Object(Less_Environment))
#6 src/vendor/oyejorge/less.php/lib/Less/Parser.php(199): Less_Tree_Ruleset->compile(Object(Less_Environment))
#7 src/XF/CssRenderer.php(363): Less_Parser->getCss()
#8 src/XF/CssRenderer.php(311): XF\CssRenderer->renderToCss('public:message....', '// Note that th...')
#9 src/XF/CssRenderer.php(235): XF\CssRenderer->renderTemplate('public:message....', NULL)
#10 src/XF/CssRenderer.php(101): XF\CssRenderer->renderTemplates(Array, Array, Array)
#11 src/XF/CssWriter.php(53): XF\CssRenderer->render(Array)
#12 css.php(30): XF\CssWriter->run(Array, 1, 3, '1ff5090bcd825f4...')
#13 {main}

Does it bug of XenForo @Chris D ?
I found the issues is:

.message-avatar-online
    {
        position: absolute;
        top: -1px;
        left: -1px;

        border: 7px solid transparent;
        border-left-color: rgb(127, 185, 0);
        border-top-color: rgb(127, 185, 0);
        border-radius: (@xf-avatarBorderRadius + 1) max(0px, @xf-avatarBorderRadius - 1px) 0 max(0px, @xf-avatarBorderRadius - 1);
    }

 

[truonglv]

@Chris D @Mike Can you confirm it?

 

[Chris D]

Well, yes, but clearly the style property is used in other contexts so it's not compatible with a percentage based border radius, so you'll need to implement a different solution. Which is to apply the CSS directly to the relevant element via extra.less or similar or use a pixel value for the property.