Magento2: css looks wrong in admin

Question

Basically, I set up a new Magento2 instance and though it took me a while, it's working nicely most of the time now. One problem that I just couldn't figure out though is a weird CSS problem in the admin interface. An edit form looks like this:

The problem seems to be with a legend tag, there is actually a fieldset legend at the beginning of the form:

<fieldset class="fieldset admin__fieldset fieldset-wide" id="brand_base_fieldset">
  <legend class="admin__legend legend">
    <span>General Information</span>
  </legend><br>
  ...
</fieldset>

But for some reason, that text is not visible and it seems to be the reason why the form looks so weird. Did anyone else encounter this problem and found a solution? The css files are all correctly included, there are no errors in the console.

Thanks for you help!

Answer 1

Try clearing all the caches in magento admin panel and check. settings -> cache management.

Answer 2

This is a known issue with the legend element in webkit browsers. There are no clean workarounds for the legend element itself, but you could instead add the margin to the first element that follows the legend.

Also, you'll have to explicitly set -webkit-margin-collapse: separate on that element to make it work properly. Try using this:

legend + * {
  -webkit-margin-top-collapse: separate;
  margin-top: 10px;
}