When using client side less compilation, admin tabs appearance is broken

[Vaseltior]

Some parts of the back-office are then unavailable. Clearly, you can't use the back office when the client side compilation of less files is active.

[mrkhoa99]

You can explain more details about your current issue?
You should try to run: php bin/magento setup:static-content:deploy

[Vaseltior]

Of course. I'm working without any cache, and configured the client side less compilation (as I just said)

Admin horizontal tabs should look like that :

tab1 | tab 2 | tab3

But instead of being on top of the content contained by those tabs, they are left on the left, and look like this

t
a
b
1
---
t
a
b
2
---
t
a
b
3

And some features are not available. You should have a look at what happens to the categories (js) tree. on the category page of the admin.

[KevinGimbel]

Can confirm this happens. When enabling Less Compilation on the Client Side in a Blank Magento 2 (2.0.2) Installation the Backend looks like this:

As you can see the Caches are invalid, so if I refresh them with ./bin/magento cache:clean and ./bin/magento cache:flush and refresh the page everything is broken (no styles applied at all), then "jumps" to load the styles and the page looks like in the Screenshot.

The Magento Installation I took the Screenshot from runs on my localhost and has nothing in it (no Sample Data, no custom CMS pages, no custom CSS/LESS) - it's just a plain Magento I installed on Monday from the tar Archive.

Software Stack

Probably doesn't matter much but here is it is:

OS: Ubuntu 15.10
Server: Apache 2.4.12
PHP: PHP 5.6.11
MySQL: 5.6.28

Magento Version: 2.0.2
Source: Tar Download from magento.com
Installation Method: composer install and the Browser-based Setup process

Enabled PHP Modules:

[PHP Modules]
bcmath
bz2
calendar
Core
ctype
curl
date
dba
dom
ereg
exif
fileinfo
filter
ftp
gd
gettext
hash
iconv
intl
json
libxml
mbstring
mcrypt
mhash
mysql
mysqli
openssl
pcntl
pcre
PDO
pdo_mysql
Phar
posix
readline
Reflection
session
shmop
SimpleXML
soap
sockets
SPL
standard
sysvmsg
sysvsem
sysvshm
tokenizer
wddx
xdebug
xml
xmlreader
xmlwriter
xsl
Zend OPcache
zip
zlib

[Zend Modules]
Xdebug
Zend OPcache

[venglar]

This is still a problem as recently as 2.1.0 final with client-side compilation turned on. It is not just tabs, it is also a large number of forms:

[eug123]

Switching between compilation modes doesn't clean pub/static folder contents automatically, so less.js tries to compile styles.css which is actually already compiled CSS.
LESS compiler calculates not escaped calc expressions, causing wrong display results.

So cleaning pub/static folder is needed (button "Flush Static Files Cache" in the bottom of the Cache Management page) in order to send to the LESS compiler .less sources instead of compiled CSS.

[MomotenkoNatalia]

@Vaseltior Do you have any other questions?

[maderlock]

Sounds like changing mode needs to automatically clear the relevant parts of pub/static then?

[eug123]

@maderlock
Yes it is right behaviour and it already implemented in the dev branch, but there is another problem with client side compilation right now which needs to be fixed (internal issue MAGETWO-55510).

Thank you!

[MomotenkoNatalia]

@Vaseltior Looks like this issue can be closed. Feel free to create new if you still have an issue.