Css3 Flexbox Compatibility Problems with Firefox and Safari

css3 flexbox compatibility problems with Firefox and Safari

First off, this:

body {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flexbox;
}

Should be this:

body {
  display: -ms-flexbox;
  display: -webkit-flex;
}
@supports (flex-wrap: wrap) { /* hide from the incomplete Flexbox implementation in Firefox */
    body {
      display: flex;
    }
}

This doesn't do anything because IE doesn't have an implementation of the 2009 Flexbox draft:

body {
  -ms-box-orient: horizontal;
}

You've also added the moz prefix on the properties from the standard Flexbox draft, but Firefox implemented those prefix free (only the 2009 properties should have a moz prefix).

Even if you fix all of these things, it still won't work in Safari or Firefox. Why?

• Until iOS7 comes out, Safari only has an implementation of the 2009 Flexbox draft. It fails to implement box-lines: multiple, which is what enables wrapping in that draft
• Firefox has an implementation for the 2009 draft and the standard draft, but neither implementation supports wrapping.

Flexbox code working on all browsers except Safari. Why?

Flexbox is a CSS3 technology. This means it's relatively new and some browsers don't provide full support for flex properties.

Here's a run-down:

• IE 8 and 9 do not support flexbox. If you're wanting to use flex properties in these browsers, don't bother wasting your time. A flexbox polyfill made the rounds for a while, but it didn't work well and is no longer maintained.

• IE 10 supports a previous version of flexbox and requires vendor prefixes. Be aware that certain properties from the current spec aren't supported in IE10 (such as flex-grow, flex-shrink and flex-basis). See the Flexbox 2012 Property Index.

• IE 11 is good, but buggy. It's based on the current flexbox standard. See the KNOWN ISSUES tab on this page for some of the problems. Also see: flex property not working in IE

• With Chrome, Firefox and Edge you're good all around. You'll find minor bugs and inconsistencies but there are usually easy fixes. You'll need to be aware of Implied Minimum Flex Sizing, which sometimes causes sizing and scrollbar problems.

• Safari versions 9 and up support the current flexbox spec without prefixes. Older Safari versions, however, require -webkit- prefixes. Sometimes min-width and max-width cause alignment problems which can be resolved with flex equivalents. See Flex items not stacking properly in Safari

For a complete review of flexbox browser support, see this page:
http://caniuse.com/#search=flex

For a quick way to add many (but not necessarily all) vendor prefixes use Autoprefixer. For Safari, see this article for -webkit- prefixes that some prefix generators don't include.

For a list of common flex bugs and their workarounds see Flexbugs.

Also, on this site, there's:

• Flexbox Tag Info

Why is my Flexbox layout not working properly in Safari 15 and in Chrome?

Couple of problems:

1. if you want both columns to be 50% width on all screen sizes, you need to set flex:1 1 50% on both the p and the img tags.
2. if you want the img tag to scale up and down instead of always being it's full size, you need to set width:100%;height:auto on it.
3. if you want to center the two elements vertically all you need is align-items:center on their container (where display:flex is defined) and not use any vertical padding on them

As a matter of personal preference I would set display:block on both the p and img tags, or better yet wrap them in tags to prevent any weirdness from what styles some browsers could put on them.

Code:

<div class="container4">
  <p class="element4">Drummer and beat producer from Gothenburg, based in Oslo. The beats are built around Pers drumming,<br />using samples from a wide variety of genres <br />mixed with other sounds.</p>
  <img class="element4-2" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/dog.jpg" alt="wall2" />
</div>

<style>
.container4 {
  font-size: 40px;
  display: flex;
  align-items: center;
  gap: 50px;
}
.element4 {
  padding-left: 50px;
  flex: 1 1 50%;
}

.element4-2 {
  padding-right: 50px;
  flex: 1 1 50%;
  width:100%;height:auto;
}
</style>

Codepen: https://codepen.io/nonsintetic/pen/poWygaY (tested on Safari and Chrome on a mac with latest everything)

Nested CSS flexbox problem - only with Safari 14 / MacOS browser

Simply add display: contents; to #gameDiv:

#gameDiv{
  display: contents;
}

Browser compatibility for display contents

As you can see this display is not compatible with IE. But this is fine because IE will ignore it and apply default display: block that works fine in IE (I tested it).

Any if you want it to be sure to apply the right display, you can still keep display: block by using 2 display as in this subject.

Using:

@supports (display: contents) {
  #gameDiv { display: contents; }
}

Demo:

$(function() {
    $(':button').button();
    $('#fullCheck').checkboxradio();

    var gamesMenu = $('#gamesMenu').menu({
      items: '> :not(.ui-widget-header)',
      select: function(ev, ui) {
        ui.item.addClass('selected').siblings().removeClass('selected');
      }
    });

    for (var game = 1; game <= 50; game++) {
      gamesMenu.append('<LI CLASS="ui-menu-item-wrapper" VALUE="' + game + '">GAME ' + game + '</LI>');
    }

    gamesMenu.menu('refresh');

    var WIDTH = 400;
    var HEIGHT = 400;

    var app = new PIXI.Application({
      width: WIDTH,
      height: HEIGHT,
      view: document.getElementById('pixiCanvas'),
      backgroundColor: 0xFFFFFF
    });

    var background = new PIXI.Graphics();
    for (var i = 0; i < 8; i++) {
      for (var j = 0; j < 8; j++) {
        if ((i + j) % 2 == 0) {
          background.beginFill(0xCCCCFF);
          background.drawRect(i * WIDTH / 8, j * HEIGHT / 8, WIDTH / 8, HEIGHT / 8);
          background.endFill();
        }
      }
    }
    app.stage.addChild(background);
  });

body {
  margin: 0;
  padding: 0;
}

#fullDiv {
  width: 100%;
  height: 100vh;
  background: #FFF;
  display: flex;
}

#hintDiv,
#totalDiv {
  font-style: italic;
  text-align: center;
  background: yellow;
}

#leftDiv {
  text-align: center;
  background: #FCC;
  display: flex;
  flex-direction: column;
}

#gamesMenu {
  overflow: auto;
}

#mainDiv {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 200px;
  min-height: 200px;
  
  box-sizing: border-box;
  border: 1px green dashed;
}

#gameDiv {
  flex-grow: 1;
  min-width: 150px;
  min-height: 150px;
}

#pixiCanvas {
  width: 100%;
  height: 100%;
  min-width: 100px;
  min-height: 100px;
  background: #CCF;

  box-sizing: border-box;
  border: 4px red dotted;
}

#rightDiv {
  text-align: center;
  background: #CFC;
  overflow-y: auto;
}

li.selected {
  font-weight: bold;
  background-color: yellow;
}

#gameDiv{
  display: contents;
}

<div id="fullDiv">
  <div id="leftDiv">
    <button id="newBtn">New game</button>
    <ul id="gamesMenu"></ul>
  </div>

  <div id="mainDiv">
    <div id="hintDiv">Hint</div>

    <div id="gameDiv">
      <canvas id="pixiCanvas"></canvas>
    </div>

    <div id="totalDiv">Total score</div>
  </div>

  <div id="rightDiv">
    <input id="fullCheck" type="checkbox">
    <label for="fullCheck">Full screen</label><br>
    <button id="recallBtn">Recall</button><br>
    <button id="shuffleBtn">Shuffle</button><br>
    <button id="swapBtn">Swap</button><br>
    <button id="skipBtn">Skip</button><br>
    <button id="resignBtn">Resign</button><br>
    <button id="pileBtn">Pile</button><br>
    <button id="movesBtn">Moves history</button><br>
    <button id="shareBtn">Share</button><br>
    <button id="playBtn">Play</button>
  </div>
</div>

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/pixi.js@5.3.3/dist/pixi.min.js"></script>

How do I normalize Cross-browser Flexbox Bugs in Firefox and Safari

Cannot reproduce.
On Firefox 42 (Windows 7 x64) the boxes display in a row for me.

According to caniuse.com flex-boxes should work appropriately in all current and major browsers.

I can't find any errors in your CSS either. What browser versions did you test it with? Have you any addons installed that might affect page content and/or style?

Flex-box discrepancy between Chrome and Firefox

I don't see any reason why this code would work. Your height: 1px trick is a hack. It's non-standardized code. So browser behavior can vary.

If you must keep this code structure, consider switching from height: 1px to min-height: 1px.

Cross Browser support for CSS Flexbox

CSS Flexbox model is optimised for UI Design.
It is developed primarily to avoid overflowing parent element. It will shrink children when ancestor element size is constricted. It will fill the space by expanding child element's size when ancestor element size extends.
Flex container shrink and expand behaviour can break with min and max width / height property.

CSS FlexBox versions by version

W3 2009 : display: box;

box-align                start | end | center | baseline | stretch  
box-direction            normal | reverse | inherit
box-flex                 <number>   0.0
box-flex-group           <integer>  1
box-lines                single | multiple
box-ordinal-group        <integer>  1   visual
box-orient               horizontal | vertical | inline-axis | block-axis | inherit inline-axis box elements    no  no  visual
box-pack                 start | end | center | justify 

W3 2011 : display flexbox | inline-flexbox

flex-align        auto | baseline   auto
flex-direction    lr | rl | tb | bt | inline | inline-reverse | block | block-reverse   flexboxes   no  lr | rl | tb | bt
flex-order        <integer> 1   
flex-pack         start | end | center | justify    

W3 2012 : display flex | inline-flex

align-content    flex-start | flex-end | center | space-between | space-around | stretch    
align-items      flex-start | flex-end | center | baseline | stretch
align-self       auto | flex-start | flex-end | center | baseline | stretch                 
flex-direction   row | row-reverse | column | column-reverse
flex-flow        <'flex-direction'> || <'flex-wrap'>    
flex-grow        <number>   ‘0’ 
flex-shrink      <number>   ‘1’
flex-wrap        nowrap | wrap | wrap-reverse
justify-content  flex-start | flex-end | center | space-between | space-around
order            <number>   0

---

Related Topics