Pseudo elements "content" breaking flexbox in Safari

[LukeR (Luke Rossiter)]

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:

<style>
.flexbox:before, .flexbox:after {
content: none;
}
</style> 

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

Hope this helps anyone having the problem.

[forresto (Forrest Oliphant)]

I’m not seeing those pseudo classes added (http://safari-pseudo-flex.webflow.io/). 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.)

[LukeR (Luke Rossiter)]

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: http://wowu.webflow.io/flextest

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

[forresto (Forrest Oliphant)]

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

[LukeR (Luke Rossiter)]

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!