0

URL to view the HTML and CSS site with good/broken alignment issues: http://jimmiheiserman.com/bannerDev/crossTest/

I am creating a mismatched brickwork layering effect with differently sized divs, centering them with flex, and then absolutely shifting them left or right to get them all into place. It seems to work great in the generally good browsers (Chrome, FF, Edge, Safari 11, Chrome mobile, even iOS 8/Safari 11. But in the broken browsers, each div appears to be anchored by their top left corner instead of center-anchored with Flex layout. Then when I adjust with left:-100px or something, they are off by a tad; accentuated worse for wider divs.

I have attached some screenshots to show what it should look like, and how it looks in some of these broken states. I have read about flex layout having issues in <=IE11, but this also shows up broken in <=iPhone7 as well, and some older mobile android.

How the layout correctly looks in many modern browsers. successful layout

Broken, misaligned version in IE11 and less (and very old versions of chrome and FF, but I don't mind that as much). broken layout

Broken layout on iOS Safari 10 and under. broken layout

Maybe there is a clean fix, or maybe it takes a ton of rewrite; I don't know. This demo is part of a more fleshed out project, so I am hoping for a simpler fix here, naturally, ha.

I also made a Codepen, but codepen will sometimes just show a message that IE11 browser is not supported, so it is not as easy to test for cross-compatibility, but here it is as well: https://codepen.io/jimmi_heiserman/pen/ZMoexQ?editors=1111 May need to view in other browsers using /full/ instead of /pen/ HTML here: 

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=920, user-scalable=yes" />
</head>

<body>
  <div id="all-banners">
    <div id="banner-edge-1" class="banner-container"></div>
    <div id="banner-edge-2" class="banner-container"></div>
    <div id="banner-edge-3" class="banner-container"></div>
    <div id="banner-edge-4" class="banner-container"></div>
    <div id="banner-edge-5" class="banner-container"></div>
    <div id="banner-edge-6" class="banner-container"></div>
    <div id="banner-edge-7" class="banner-container"></div>
    <div id="banner-edge-8" class="banner-container"></div>
    <div id="banner-1" class="banner-container banner-primary"></div>
    <div id="banner-2" class="banner-container banner-primary"></div>
    <div id="banner-3" class="banner-container banner-primary"></div>
    <div id="banner-4" class="banner-container banner-primary"></div>
    <div id="banner-5" class="banner-container banner-primary"></div>
    <div id="banner-6" class="banner-container banner-primary"></div>
    <div id="banner-7" class="banner-container banner-primary"></div>
    <div id="banner-8" class="banner-container banner-primary"></div>
    <div id="banner-9" class="banner-container banner-primary"></div>
  </div>
</body>
</html>

and the CSS:

html, body {
  background: radial-gradient(circle, #fafafa, #444444);
  margin: auto;
  height: 100%;  
  overflow: hidden;
}

#all-banners {
  display: flex;
  justify-content: center;
}

.banner-container {
  border-style: solid;
  border-color: black;
  border-radius: 10px;
  border-width: 1px;
  background-color: lavender;
  position: absolute;
  overflow: hidden;
}

.banner-primary {
  background-color: #ffcccc;
}

#banner-1 {
  width: 160px;
  height: 800px;
  transform:translate(-350px, 60px);
}

#banner-2 {
  width: 120px;
  height: 600px;
  transform:translate(-200px, 60px);
}

#banner-3 {
  width: 560px;
  height: 90px;
  transform:translate(150px, 60px);
}

#banner-4 {
  width: 400px;
  height: 300px;
  transform:translate(70px, 160px);
}

#banner-5 {
  width: 150px;
  height: 70px;
  transform:translate(355px, 160px);
}

#banner-6 {
  width: 150px;
  height: 620px;
  transform:translate(355px, 240px);
}

#banner-7 {
  width: 190px;
  height: 190px;
  transform:translate(-35px, 470px);
}

#banner-8 {
  width: 200px;
  height: 390px;
  transform:translate(170px, 470px);
}

#banner-9 {
  width: 320px;
  height: 190px;
  transform:translate(-100px, 670px);
}

#banner-edge-1 {
  width: 1000px;
  height: 200px;
  transform: translate(-700px, -150px);
}

#banner-edge-2 {
  width: 620px;
  height: 100px;
  transform: translate(120px, -50px);
}

#banner-edge-3 {
  width: 1000px;
  height: 400px;
  transform: translate(940px, -50px);
}

#banner-edge-4 {
  width: 1000px;
  height: 500px;
  transform: translate(940px, 360px);
}

#banner-edge-5 {
  width: 1000px;
  height: 1200px;
  transform: translate(650px, 870px);
}

#banner-edge-6 {
  width: 570px;
  height: 1200px;
  transform: translate(-145px, 870px);
}

#banner-edge-7 {
  width: 1000px;
  height: 1400px;
  transform: translate(-940px, 560px);
}

#banner-edge-8 {
  width: 1000px;
  height: 490px;
  transform: translate(-940px, 60px);
}
Jimmi Heiserman
  • 109
  • 1
  • 10
  • seems like your transform:translate not working properly in IE, check this link https://stackoverflow.com/questions/29864790/why-on-safari-the-transform-translate-doesnt-work-correctly – Arun Kumar Sep 13 '18 at 16:13
  • Nope, I don't think it is the translate rule that is causing the problems. When translates are not even used, you can see the divs are not centered horizontally as they should be. Here is a view of the centered flex divs in Chrome; correct: https://i.imgur.com/n3xxQfE.png Here is a view of the centered (yet oddly left justified) flex divs in IE11; incorrect: https://i.imgur.com/qSRVoto.png Along with a forked codepen: https://codepen.io/jimmi_heiserman/full/XPYEJq/ – Jimmi Heiserman Sep 13 '18 at 18:55

0 Answers0