Flexbox in Safari

[Vlad L]

Hi all,

I replicated flexbox from the bellow article, but now experience issues with Safari browser, where dividers in my selection overlap each other.

I used the prefixes, but this seems to not treat the issue. Anyone else experienced same kind of problems when checking site in different browsers? How to make it work guys?

https://css-tricks.com/designing-a-product-page-layout-with-flexbox/

section {
  color: aliceblue;
  width: 100%;
  margin: 0 auto;

}

.members {
  width: 50%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}

.member-card {
  padding: 2%;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  -webkit-flex-basis: 21%;
      -ms-flex-preferred-size: 21%;
          flex-basis: 21%;
  margin-bottom: 5px
}


.member-image {
  -webkit-filter: grayscale(100%);
          filter: grayscale(100%);
  text-align: center;
  max-width: auto;
  text-align: center;
  display: block;
}


.team-body {
background-image:
-webkit-linear-gradient(bottom, whitesmoke, rgba(255,255,255,0) 99%), url('../img/team-2-page.jpg');
background-image:
linear-gradient(0deg, whitesmoke, rgba(255,255,255,0) 99%), url('../img/team-2-page.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 100% 0%;
}

/****Nav***/

.teamnav {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.teamnav ul {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.teamnav a {
  text-decoration: none;
  padding: 0 20px 0;
  height: 70px;
  line-height: 70px;
  font-family: "Pontano Sans", Helvetica, Arial, sans-serif;
}

[VJ]

@Vlad L, your question does not make sense. code also does not give any meaning here. try to put your code with dummy content in codepen.io or jsbin.com a online editor tool you can save it and share it.

i used your code nothing to find any issue.

http://s.codepen.io/vulchivijay/debug/qZrpzN

[Author]

Posts