Pseudo elements "content" breaking flexbox in Safari

I guess this is a bug but let me know if it is known behaviour.

On two of my webflow sites I have experienced this - and it has only started happening to recently published sites. Users with safari noted that the items inside flexboxes were being pushed down onto the next row so that the item in the top row was on its own.

I noticed that before all flexboxes there is a pseudo-element added

.flexbox:before, .flexbox:after {
content:" ";

In Safari the space is actually read and knocks the content left causing the rightmost wrapped child to drop to the next row.

To fix it I used this in the custom code head:

.flexbox:before, .flexbox:after {
content: none;

Where ‘.flexbox’ is the class name you give to the flexbox element.

Hope this helps anyone having the problem.

1 Like

I’m not seeing those pseudo classes added ( There might be some other style triggering that.

Could you share a link to the live site, and/or read-only link? (You can DM me if you don’t want it to be public.)

Ah ok so I made a test page in an old project to try and recreate. It wasn’t showing up initially.

It only happens if you set the child element to float left before you change the parent to be a flexbox.

(The option is greyed out when it is inside a flexbox but it appears that the setting is still active.)

Here is the page:

Again only an issue on safari for me, desktop and iphone

I see, so the issue is .w-clearfix getting added automatically but not cleared. I’ll look into this.

I think you can get rid of that class on the parent by:

  1. set parent to Display Setting > block
  2. set child to Float > none
  3. set parent back to Display Setting > flex

I’m going to always make sure to turn off float for children in the future, just realised what was happening and thought it would be helpful to point out. Thank you for getting back to me so fast!

1 Like

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.