モバイルでのCSSフレックスボックスボーダー

Question

私はいくつかのタイルとそれらを移動することができる小さな文字を持つボードで構成されている小さなhtml/css/jsゲームを作っています。ボードはcss flexboxを使ってdivで作られています。

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

ChromeやFirefoxのようなデスクトップブラウザでは、それは素晴らしいです。しかし、モバイル（iOS Safari/ChromeとAndroid Chrome）では、境界線のようなものが表示されます。最も奇妙なことは、それが完全に規則的ではないということである：S

あなたがそれを見ることができますので、私はjsfiddleを設定している：

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

をありがとう！

Answer 1

あなたはそのギャップを隠すためにlitlle影を使用することができます。

.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/

編集：私はすでに上のSO他にこれに答えたが、見つけることができませんでした重複