twbs/bootstrap

Micro clearfix hack breaks "white-space: pre-wrap"

Closed this issue · 6 comments

PowerGamer1 commented

Bootstrap uses http://nicolasgallagher.com/micro-clearfix-hack/ for a lot of its elements. This particular method of cleafixing introduces bugs when an element being clearfixed is set to white-space: pre-wrap.

For example, I need Bootstrap panel body to have a preformatted content, so I set a style: .panel-body { white-space: pre-wrap }. This makes Firefox 47.0.1 and Chrome 51.0.2704.106 (IE11 and Edge somehow are not affected) display extra spaces created by micro clearfix hack (those spaces are not supposed to exist or be visible on the page at all) at the top and bottom of panel body. As a result the panel body looks like it has an extra new line before and after "Panel body" text.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet">
    <style>
        .panel-body { white-space: pre-wrap }
    </style>
</head>
<body style="margin: 10px">
    <div class="panel panel-default">
        <div class="panel-heading">Panel title</div>
        <div class="panel-body">Panel        body</div>
    </div>
</body>
</html>

First screenshot is without .panel-body { white-space: pre-wrap } style, second screenshot with .panel-body { white-space: pre-wrap } style.
normal
pre-wrap

cvrebert commented

So, seems like simply adding white-space: normal to the clearfix's pseudo-elements fixes the problem?

PowerGamer1 commented

@cvrebert

So, seems like simply adding white-space: normal to the clearfix's pseudo-elements fixes the problem?

That's a really nice fix you came up with. :) I think it should be included in the Bootstrap CSS where clearfix is defined.

Also, please note that I originally reported the problem for Bootstrap 3.3.6 (you can see the version in the link to bootstrap.css in my example). So I never tested it and don't know how the things are in Bootstrap v4.

cvrebert commented

CC: @mdo

Also, please note that I originally reported the problem for Bootstrap 3.3.6

Yeah, it's just that we're nearing a point where v3 bugs are becoming v3 "features" for compatibility reasons, so we need to evaluate whether it's worth trying to change v3 here.
v4 on the other hand can definitely receive the fix.

mdo commented

Confirmed this is a problem in v4, fwiw. https://jsbin.com/nabowul/

mdo commented

This will be fixed by #21224 for v4.

thierryk commented

For the record (since the problem is not referenced in this issue), the extra space was due to the value of the content property in the clearfix rule (there is a space between the quotes):

content: " ";
  • 👍1