Displaying a flexbox in old browsers

Question

First I will explain what I have so far; A dynamic canvas which is always at the middle of the page, it's width is calculated by javascript calculations so it might vary, after that some flexbox divs are added to it's sides and they fill the rest of the page equally(it works the same way even with CTRL resizing):

https://jsfiddle.net/62g1mqw0/2/

<div class="wrapper">
  <div class="divA"></div>
  <div class="divB">
    <canvas id="canvas"></canvas>
  </div>
  <div class="divC"></div>
</div>
<style type="text/css">
  * {
  box-sizing: border-box;
}
body {
  height: 100vh;
  margin: 0;
}
.wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 100%;
}
.wrapper div {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  border: 1px solid;
}
.wrapper .divB {
  border: none;
}
#canvas {
  vertical-align:top;
}
</style>

<script>
var canvas = document.getElementById("canvas");

var WIDTH = 500; // This could be anything! it comes from
//previous calculations which I did not include here because they are irelevant

document.getElementsByClassName('divB')[0].style.flex = '0 0 ' + WIDTH + 'px';

var width = document.getElementsByClassName('divB')[0].getBoundingClientRect().width;
var height = document.getElementsByClassName('divB')[0].getBoundingClientRect().height;

document.getElementById("canvas").style.width = width + 'px';
document.getElementById("canvas").style.height = height + 'px';
var ctx = canvas.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, width, height);

// resize handler Ref: https://developer.mozilla.org/en-US/docs/Web/Events/resize
(function() {
  window.addEventListener("resize", resizeThrottler, false);
  var resizeTimeout;

  function resizeThrottler() {
    if (!resizeTimeout) {
      resizeTimeout = setTimeout(function() {
        resizeTimeout = null;
        actualResizeHandler();
      }, 66);
    }
  }

  function actualResizeHandler() {
    var width = document.getElementsByClassName('divB')[0].getBoundingClientRect().width;
    var height = document.getElementsByClassName('divB')[0].getBoundingClientRect().height;

    document.getElementById("canvas").style.width = width + 'px';
    document.getElementById("canvas").style.height = height + 'px';
    ctx = canvas.getContext("2d");
    ctx.fillStyle = "red";
    ctx.fillRect(0, 0, width, height);
  }
}());
</script>

As you can see on the jsFiddle, the total outcome is that 100% of the width and height of the page are filled by both canvas and flexbox.

Now, in modern browsers you won't see a problem, but in old browsers you will see weird stuff going on; one div floats to the next, some black spots etc. It is very important to me to have old browsers support since I compile it with cordova and Android users with old versions still have old browsers, and they might see my app very weird. I've tested it on KitKat and some more old versions and I don't know why they don't support the flexbox properly. I added -webkit lines and it still didn't help. I don't even mind going to another completely different solution that doesn't involve flexbox

flexbox browser compatibility: http://stackoverflow.com/q/35137085/3597276 — Michael Benjamin, Nov 19 '16 at 04:07

score 0 · Answer 1 · edited May 23 '17 at 10:30

0

You're probably going to save yourself a lot of time and frustration by using a polyfill - for full browser support you'll flat-out need to.

Most popular appears to be Flexibility.

If you don't want to go down the polyfill route you could follow some of the answers from this question a few years ago.

edited May 23 '17 at 10:30

Community

1
1

answered Nov 19 '16 at 01:39

chrBrd

603
5
23

I just tried Flexibility and it did not help. I think that the problem is simply somewhere with the way my canvas interacts with the divs... also the stackoverflow link you have provided did not help since my situation is more complex. EDIT: I am not sure how I am supposed to use Flexibility other than including it – RunningFromShia Nov 19 '16 at 01:48
From the readme on GitHub: "If you’re only targeting Internet Explorer 10 and lower, add a -js-display: flex declaration before any display: flex declarations in your CSS" and "If you’re targeting other browsers, use the data-style attribute to alert these browsers to your changes." I assume you've tried both of those? – chrBrd Nov 19 '16 at 02:32

Displaying a flexbox in old browsers

1 Answers1