Strange Rendering Issue with CSS Flexbox on Specific Browsers - Need Insights

[amelianoah667]

Hi everyone,

I’ve encountered a strange issue while working on a project for Vapors.pk, and I’m hoping the community might have some insights. The problem is related to CSS Flexbox and how it renders differently on specific browsers, particularly when using nested flex containers.

Here’s the situation:
On a page I’m developing, I have a main container set to display: flex, with multiple child elements also using Flexbox. Everything looks perfect on Chrome and Firefox, but when I test it on Safari (especially on iOS), the layout breaks. The child elements don’t align as expected, and the margins collapse, causing the design to look off.

Here’s a simplified version of the code:

<div class="parent-container">
  <div class="child-flex">
    <!-- Content -->
  </div>
  <div class="child-flex">
    <!-- Content -->
  </div>
</div>

.parent-container {
  display: flex;
  flex-direction: column;
}

.child-flex {
  display: flex;
  margin: 10px;
}

Issue:

• The child elements within .parent-container are not aligning properly on Safari.
• Margins between the .child-flex elements are collapsing in a way that doesn’t happen on Chrome or Firefox.
• I’ve tried adding -webkit-flex prefixes and other browser-specific hacks, but nothing seems to solve the problem entirely.

Question:
Has anyone experienced similar issues with Flexbox rendering inconsistencies across different browsers, particularly Safari? What solutions or workarounds have you found effective in maintaining consistent layouts across all browsers?

I’m considering whether it might be a better idea to switch to a different layout method or if there’s a more reliable way to handle this with Flexbox.

For those who want to see the problem in action, I’ve set up a demo on my site Vapors.pk (Note: This is on a live project, so please excuse any unfinished sections).

Looking forward to hearing your thoughts and potential solutions!

[m_hutley]

For sanity… what version # of Safari?

[PaulOB]

@amelianoah667

Here’s a simplified version of the code:

That code works fine in Safari and ios.

Can you show a demo that illustrates your problem?

Your live site looks the same on Safari and Chrome and is pretty broken at various screen sizes. Maybe a screenshot of the specific problem you are seeing would help as I see lots of problems there

[ralphm]

Yes, it looks the Same on Safari and on other browsers to me. The real issue is that I think you’ve designed this with one viewport size in mind, and things break a lot if you reduce the viewport width on any browser. Using background images for the products is part of the problem. those should be inline images. The Shop Now buttons will also jump around at different viewport sizes. You could make some nice improvements to this by using flex or grid on thos individual boxes, or even having a crack at subgrid, which would help to align those buttons nicely.

[PaulOB]

@PaulOB

as I see lots of problems there

This is what the screen looks like to me:

Its all over the place.

If you add the following code you can tidy that up:

e.g. Roughly like this:

.elementor-heading-title{
    line-height:1.0!important;
}
.elementor-section.elementor-section-items-bottom>.elementor-container{
    align-items:normal!important;
}
.elementor-widget-wrap{
    align-items:normal;
        align-content:normal;
    background-position:center!important;
}
.elementor-widget-wrap>.elementor-element {
   margin-top:auto!important;
}

Unfortunately important is needed because you are using long chains of specific styles making it almost impossible to work with,

With that code added it looks like this:

The infinite nesting is a major headache and those wordpress/elementor types of layout are almost impossible to tidy up unless you start from scratch.

[amelianoah667]

Thnku so much for guidenes