How to fix flexbox example for an apple device?

Question

I would like to create a responsive web application with three.js.

I did a skeleton but this seems to run correctly only on PC and Android smartphones. There are problems on apple devices like macbook iphone and ipad. It seems that in these devices the toolbar at the bottom ends up off-screen

I have tried the application on the PC and on some Android smartphone devices and it seems to work, while on IPAD devices it has problems.

This is a minimal example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/100/three.min.js"></script>
    <script src="scripts/OrthographicTrackballControls.js"></script>


    <link rel="stylesheet" href="styles/toolbar.css">
    <title>Document</title>
<style>
    html,body{
        width: 100%;
        height:100%;
        overflow: hidden;
        margin: 0px;
        padding: 0px;
        background: linear-gradient( #EAF0F8,  #749ACF);
    }

    .button{
        flex: 0 0 50px;
        background-color: transparent;
        min-height: 71px;
        display: block;
    }


.container-row
{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    background-color: transparent;
}

.container-column
{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    flex:1;
    background-color: transparent;
}

canvas{
    width: 100%;
    height: 100%;
    min-height: 10px;
    background: transparent;
}

#sliderDiv{
    display: flex;
    flex: 0 0 70px;
    background-color: transparent;
    order: 1;
    /*margin-bottom: 10px;*/
}

#playerDiv{
    display: flex;
    flex: 0 0 50px;
    background-color: transparent;
}

.hspaceExpand{
    flex:1;
    background-color: transparent;
    min-width: 0px;
}

#notes
{
    background-color: #ddffdd;
    border : 6px solid #4CAF50;
    flex: 0 0 300px;
    display: none;
}
#canvasKf
{
    background-color: red;
    flex: 0 0 500px;
    display: none;
}
#containerSP
{
    margin-top: 10px;
    margin-bottom: 10px; 
    display: flex;
    flex-direction: column;
}

#viewToolBarMobile
{
    position:absolute;
    background-color: rgba(0,0,0,0.3);
    bottom:0px;
    width: 100%;
    height: 292px;;
    display: flex;
    flex-direction:row;
    justify-content: center;
    display: none;
}

#toolbar2
{
    position: relative;
    background-color: transparent;
    min-width: 252px;
}

#toolbar{
    display: none;
}

/* media queries */
@media screen and (min-width:600px)
{
    #notes
    {
        display:block;
    }
    #canvasKf{

        display:block;
    }

    #openToolBarBtn
    {
        display: none;
    }

    #toolbar{
    display: block;
    }

    #viewToolBarMobile
    {
        display: none;
    }
    #toolbar2
    {
        display: none;
    }

    #containerSP
    {
        margin-left: 10px;
        margin-right: 10px;
    }

}



@media screen and (min-width:1300px)
{
    #containerSP
    {
        flex-direction: row;
    }

    #playerDiv{
        margin-right: 10px;
    }


}

</style>


</head>
<body>

<div id="main-container" class="container-row"> 
    <div id=notes>
            note<br>
            note<br>
            note<br>
            note<br>
            note<br>

    </div>
    <div id="central-container" class="container-column"> 
        <div class="container-row" style="position: relative">
            <div id="toolbar" style="position: absolute">
                    <button id="leftBtn" class="rectangle"> L  </button>
                    <button id="rightBtn" class="rectangle"> R  </button>
                    <button id="upBtn" class="rectangle-up"> U  </button>
                    <button id="frontBtn" class="rectangle-up"> FR  </button>
                    <button id="downBtn" class="rectangle-up"> D  </button>
                    <button id="elementBtn" class="rectangle-up"> EL  </button>
                    <button id="arcSupBtn" class="rectangle-up"> AS  </button>
                    <button id="arcInfBtn" class="rectangle-up"> AI  </button>
                </div>
            <canvas id="canvas3d"> </canvas> 
        </div>
        <div id="containerSP">
            <div id="sliderDiv">
                <div class="hspaceExpand"></div>
                <img src="http://yobit.altervista.org/imgMod/slider.png" style="width:340px">
                <div class="hspaceExpand"></div>
            </div>
            <div id="playerDiv">
                    <div class="hspaceExpand"></div>
                    <img src="http://yobit.altervista.org/imgMod/buttonPlayer.png" style="width:340px">
                    <div class="hspaceExpand"></div>
            </div>
        </div>
        <div id="openToolBarBtn" class="button">
            <div class="container-row">
                    <div class="hspaceExpand"> </div>
                    <img src="http://yobit.altervista.org/imgMod/buttonView.png " style="width:340px">
                    <div class="hspaceExpand"> </div>
            </div>
    </div>
 </div>
<canvas id="canvasKf"></canvas>
<div id=viewToolBarMobile>
    <div id="toolbar2">
            <button id="leftBtn" class="rectangle"> L  </button>
            <button id="rightBtn" class="rectangle"> R  </button>
            <button id="upBtn" class="rectangle-up"> U  </button>
            <button id="frontBtn" class="rectangle-up"> FR  </button>
            <button id="downBtn" class="rectangle-up"> D  </button>
            <button id="elementBtn" class="rectangle-up"> EL  </button>
            <button id="arcSupBtn" class="rectangle-up"> AS  </button>
            <button id="arcInfBtn" class="rectangle-up"> AI  </button>
        </div>
    <button id="closeBtn" style="position: absolute; right:0%"> X  </button>    
</div>

</body>
<!-- <script src="kfgui.js"> </script>  -->
<script src="scripts/view3d.js"></script>
<!-- <script src="viewToolBar.js"> </script>   -->
</

</html>

Rey · Answer 1 · 2019-08-05T13:10:42.500

2

display: flex is not supported by all browser types. To accommodate your flex display for all browsers, use the following:

display: -webkit-box;   /* OLD - iOS 6-, Safari 3.1-6, BB7 */
display: -ms-flexbox;  /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */

You need to use the correct vendor prefix depending on the browser. By using all of the above, you'll be taking most modern browsers into account.

Look here for a brief description with a working example of using display: flex

Check out this for another explanation on Stackoverflow.

Let us know if this solves your problem.

edited Aug 05 '19 at 13:10

answered Aug 05 '19 at 13:03

Rey

51
6

I tried to replace every instance of display:flex with the string block that you suggest me but this does not fix the problem. I tried on ipad 3 (chrome version 71.0.3578.89) – Marina Buc Aug 05 '19 at 13:17
@MarinaBuc, are you referring to #viewToolBarMobile? It could have something to do with your flex-direction or your width? – Rey Aug 05 '19 at 13:24
@MarinaBuc maybe you can post a pic of what is happening on the Apple devices to make it a little clearer as to what's happening? – Rey Aug 05 '19 at 13:26
part of sliderDiv control is off-screen – Marina Buc Aug 05 '19 at 13:27
It may have something with the flex-basis value of 70px at `#sliderDiv{ display: flex; flex: 0 0 70px; background-color: transparent; order: 1; /*margin-bottom: 10px;*/ }`. Have you tried changing that value to a number between 0 and 1? See this link for an explanation on how to properly use flex properties: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ – Rey Aug 05 '19 at 13:32
Can I add that you do also need to ensure that the vendor prefixes I commented with initially are also prefixed to your other flex properties. So `flex` should also be `-ms-flex` and `webkit-flex`. In other words, everywhere you have flex, you also need to have -ms-flex and -webkit-flex. See `https://css-tricks.com/using-flexbox/` for an example – Rey Aug 05 '19 at 13:36
Here the problem on ipad3 http://yobit.altervista.org/img/ImmaginiDebug/flexbox.jpg – Marina Buc Aug 05 '19 at 13:42
sliderDiv should have a fixed height – Marina Buc Aug 05 '19 at 13:49
I'm sorry but I don't see the problem from that picture. What is it supposed to look like? – Rey Aug 05 '19 at 13:50
http://yobit.altervista.org/img/ImmaginiDebug/flexbox2.jpg Look at where I write off screen. The bottom part of slider component is off screen – Marina Buc Aug 05 '19 at 14:03
I don't think this is a height problem or anything to do with flex. Rather, you can add a margin or padding to the bottom of that div. Something like `margin-bottom: 5px;` Alternatively, fiddle around with `#sliderDiv`s paddings and margins – Rey Aug 05 '19 at 14:13
I tried add margin-botton and padding to #sliderDiv but never change. I noticed instead that on the MacBook in the chrome browser it behaves correctly while on the Saphari it doesn't. On ipad wrong on both chrome and saphari – Marina Buc Aug 05 '19 at 15:10

How to fix flexbox example for an apple device?

1 Answers1