Bug chrome div uno dentro l'altro

[KILLERIX]

Ragazzi sto impazzendo. Ho un problema su chrome di "1px". Ovvero, quando metto a "matriosca" più di 3 div succede che la largezza di quelli dopo il primo non sono uguali a quelli precedenti ma c'è una linea di 1 px a destra e questo accade solo su Chrome da iMac. Ho provato a vedere su Safari, Firefox, Opera e anche Chrome per iPhone e questo non accade. Non mi è mai successo e non so come risolverlo.

Codice: Seleziona tutto

<div id="container">
                <div class="uno">
                    <div class="due">
                        <div class="tre"></div>

                    </div>
                </div>

            </div>


            <style>


                #container {
                    background-color: darkslategrey;
                    margin: 0 auto;
                    width: 700px;

                }
                .uno { 
                    width: 100%; 
                    height: 400px; 
                    background-color: black; 
                    
                }
                .due {
                    position: relative;
                    width: 100%;
                    height: 300px;
                    background-color: #175C80;
                    opacity: 0.9;

                }

                .tre {
                    position: absolute;
                    bottom: -100;
                    margin: 0 auto;
                    width: 100%;
                    height: 50%;
                    background-color: aliceblue; 
                }

Vi metto questo esempio su cui sto lavorando da due giorni per risolvere quella linea a destra.

Safari:

Safari

Chrome: