Search code examples
cssgoogle-chromeflexboxmobile-safari

CSS flexbox borders on mobile

I am making a small html/css/js game that consists on a board with several tiles and a small character that can move on them. The board is made with divs using css flexbox.

<div class="board">
  <div class="row">
    <div class="cell green"></div>
    ...
  </div>
  ...
</div>

On desktop browsers like Chrome or Firefox it looks great. But on mobile (iOS Safari/Chrome and Android Chrome) it shows kind of a border. The most odd thing is that it isn't completely regular :S

enter image description here

I have set up a jsfiddle so you can see it:

https://jsfiddle.net/igorosabel/jjy1ok3c/

Thanks!

Solution

  • You can use a litlle shadow to hide that gap :

    .board{
  display: flex;
  flex-direction: column;
  width: 300px;
  height: 300px;
}

.row{
  flex: 1;
  display: flex;
  flex-direction: row;
}

.cell{
  flex: 1;
}

.grass{
  background-color: #489848;
  box-shadow:0 0 0 1px #489848; /* because of a white gap that can show on small screens */
}
    <div class="board">
  <div class="row">
    <div class="cell grass"></div>
    <div class="cell grass"></div>
    <div class="cell grass"></div>
    <div class="cell grass"></div>
  </div>
  <div class="row">
    <div class="cell grass"></div>
    <div class="cell grass"></div>
    <div class="cell grass"></div>
    <div class="cell grass"></div>
  </div>
  <div class="row">
    <div class="cell grass"></div>
    <div class="cell grass"></div>
    <div class="cell grass"></div>
    <div class="cell grass"></div>
  </div>
  <div class="row">
    <div class="cell grass"></div>
    <div class="cell grass"></div>
    <div class="cell grass"></div>
    <div class="cell grass"></div>
  </div>
</div>

    https://jsfiddle.net/jjy1ok3c/3/

    edit: i already answered this else where on SO, but could not find the dupliicate screenshot android