Chrome and Safari still relevant display issue (3rd episode)

[Brabant]

Hi guys!

As reported in two previous topics (dated the last March, 7th and June, 1st), all of our pages display perfectly on Firefox, except that columns (three columns, in this case) become one on Chrome and Safari — issue for which @Prasant has kindly confirmed:

“This seems to be an issue between browsers. I checked and can replicate on Chrome and Safari both. In Firefox it’s working fine. I have reported in our internal issue tracker for our developers to take a look.”

While @RueNel has added:

[…] a new release update cycle is on the way. We will also communicate with our developers and bump them with this issue. Hopefully, they might be able to give us updates on this issue.

Considering that several months and major Pro upgrades have passed now, could you please tell me a concrete solution — knowing that all of our system, theme and plugins are up to date.

With thanks in advance,

Victor

[ruenel]

Hello Victor,

I have taken a closer look at your issue and I found out that you have applied the columns to the grand child of the text element. Normally, the text element will accept a plain text and when you apply the column option, the paragraph will be in the columns since it is a child of the text element where the CSS Column option is applied.

Text element
   - Paragraph

In your case, it is different because you are using list and the resulting output would be like this:

Text element
   - `<ul>`
      - `<li>some text</li>`

The browsers renders the list into columns differently. Firefox was able to apply the CSS Column option but the both Chrome and Safari fails to do that. To resolve this issue, I would highly suggest that you add this custom css instead:

.x-text > ul {
    -webkit-columns: 8em 3;
    columns: 8em 3;
    -webkit-column-gap: 1em;
    column-gap: 1em;
    -webkit-column-rule: 0em none transparent;
    column-rule: 0em none transparent;
    -webkit-column-break-inside: unset !important;
    page-break-inside: unset !important;
    break-inside: unset !important;
}

This code will force, both Chrome and Safari, to make the child or li elements to display in columns.

Please let us know how it goes.

[Brabant]

Hi @RueNel, and many thanks for your willingness & crystal clear explanations, as always!

In short, I only added a selector class (e.g. .e1234-56.x-text > ul { …) before your custom CSS, to avoid affecting all of our ul Text element.

[rad]

Glad we could help and you’re most welcome! And yes, you could do that as well.