CODEWITHSUNDEEP
htmlcsssafari
Shane D'Silva
Shane D'Silva

Reputation: 453

Safari 14.1 CSS column-count causing containers to extend unnecessarily

Currently trying to switch between a 2 column paragraph to a single column paragraph when the browser window width is <769px and >1040px. I'm using column-count to automatically split the text into 2 columns and it works consistently on Chrome and Firefox and almost as well on Safari.

While testing, I found a bug on Safari 14.1+ wherein if you resize the browser from >1040px to 768px, the div containing the text expands for some reason and when you resize it back to >1040px, the issue persists.

Here is an example code

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
    .border {
        border: 1px solid red;
    }
    @media only screen and (min-width: 769px){
        .columns-md {
            column-count: 2;
            column-gap: 2rem;
            min-height: initial;
        }
    }
    @media only screen and (min-width: 1041px) {
        .columns-off-lg {
            column-count: 1;
            column-gap: initial;
            min-height: 0;
        }
    }
</style>
<body>
    <div class="border">
        <div class="columns-md columns-off-lg">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
        </div>
    </div>
</body>
</html>

Other things I've noticed:

  1. Turning a style on/off through Safari's web inspector seemingly fixes the issue but if you resize the browser horizontally again, other sections end up with the bug as well.
  2. Removing column-count eliminates the issue but then I don't get the desired design.
  3. For when the issue appears <769px, it doesn't occur between 769px and 1040px when the text is split and reappears when the text is in a single paragraph.
  4. The issue occurs ONLY when the browser width is >1040px and then resized down to <769px.
  5. Must refresh the page at >1040px to recreate the issue before resizing the browser.
  6. The issue doesn't seem to be present on earlier versions of Safari, however, I've only tested on 13.1.

My machine is currently running Big Sur and Safari 14.1.

Any idea if this is just a Safari issue or my CSS?

P.S. I can also confirm others were able to recreate the the bug.

Upvotes: 4

Views: 2214

Answers (2)

Shane D&#39;Silva
Shane D&#39;Silva

Reputation: 453

.safari-wrapping-fix {
    display: inline-block;
    white-space: nowrap;
}

Add the above css to a span element before your closing "p" tag. This solved the issue for us.

Example:

<p>Lorem Ipsum <span class="safari-wrapping-fix"></span></p>

Upvotes: 6

william
william

Reputation: 83

I can confirm that it is a Safari issue. I am running through a very similar issue on my own project. When refreshing the browser, the layout will look correctly, it is only when I resize that notice the issue, also toggling between CSS properties inside the browser inspector will solve the issue instantly, only when I resize that the problem appears again. And it is only happening for Safari 15 and Big Sur.

Upvotes: 2

Related Questions