2

I have been making website which perfectly worked with Google Chrome. For centering elements on website i used flex attributes, and it was maximally centered when browser was scaled. But when i tried my website on Safari i got different result, At first look it was centered, but after scaling it, i got some unwanted results:

  • Elements were not responding browser's scale at all.
  • I could scroll on overflow, even though it i had overflow:hidden style on body which worked perfectly on Google Chrome.

This is body style for website:

html,
body {
  margin: 0;
  background-color: #232622;
  height: 1500px;
  width: 100%;
}
body {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-justify-content: center;
  justify-content: center;
  overflow-x: hidden;
}

Safari version is 9.1.2.

HTML that has problem with compatibility:

<input type="checkbox" id="show" value="open">
<label id="show_code" for="show">Show Code <b class="caret">&#9660;</b></label>
<div class="code">
  <code><ul class="main" style="list-style:hidden">
    <li><a class="logo" href="/" style="text-decoration:none"></a></li>
    <li><a class="nav" href="/browse" style="text-decoration:none">Browse</a></li>
    <li><a class="nav" href="/support" style="text-decoration:none">Support</a></li>
    <li><a class="nav" href="/add_funds" style="text-decoration:none">Add Funds</a></li>
    <li><a class="login" href="/login" style="text-decoration:none"></a></li>
</ul>
<ul class="down-bar" style="list-style:hidden">
    <div class="mainouter">
        <div class="mainmover">
            <div class="dropdown">
                <input type="checkbox" value="drop" id="drop-1" class="dropper">
                <li><label class="down-nav" id="down-nav-1" for="drop-1" style="text-decoration:none">Knives <b class="caret"> &#9660;</b></label></li>
                <div class="dropdown-menu">
                    <a href=/?search=M9%20Bayonet&type=weapon class="Text1"><label class="m9_bayonet" style="width:30px;height:30px;position:absolute;top:5px;left:5px;cursor:pointer;"></label>M9 Bayonet</a>
                    <a href=/?search=Karambit&type=weapon class="Text1"><label class="karambit" style="width:30px;height:30px;position:absolute;left:5px;top:59px;cursor:pointer;"></label>Karambit</a>
                    <a href=/?search=Bayonet&type=weapon class="Text1"><label class="bayonet" style="width:30px;height:30px;position:absolute;left:5px;top:116px;cursor:pointer;"></label>Bayonet</a>

                    <a href=/?search=Butterfly%20Knife&type=weapon class="Text1"><label class="butterfly" style="width:30px;height:30px;position:absolute;left:5px;top:170px;cursor:pointer;"></label>Butterfly Knife</a>
                    <a href=/?search=Flip%20Knife&type=weapon class="Text1"><label class="flip" style="width:30px;height:30px;position:absolute;left:5px;top:225px;cursor:pointer;"></label>Flip Knife</a>
                    <a href=/?search=Falchion%20Knife&type=weapon class="Text1"><label class="falchion" style="width:30px;height:30px;position:absolute;left:5px;top:280px;cursor:pointer;"></label>Falchion Knife</a>
                    <a href=/?search=Gut%20Knife&type=weapon class="Text1"><label class="gut" style="width:30px;height:30px;position:absolute;left:5px;top:334.5px;cursor:pointer;"></label>Gut Knife</a>
                    <a href=/?search=Shadow%20Daggers&type=weapon class="Text1"><label class="shadow" style="width:30px;height:30px;position:absolute;left:5px;top:390px;cursor:pointer;"></label>Shadow Daggers</a>
                    <a href=/?search=Huntsman%20Knife&type=weapon class="Text1"><label class="huntsman" style="width:30px;height:30px;position:absolute;left:5px;top:444px;cursor:pointer;"></label>Huntsman Knife</a>
                    <a href=/?search=Bowie%20Knife&type=weapon class="Text1"><label class="bowie" style="width:30px;height:30px;position:absolute;left:5px;top:498.5px;cursor:pointer;"></label>Bowie Knife</a>
                </div>
            </div>
            <div class="dropdown-1">
                <input type="checkbox" value="drop" id="drop-2" class="dropper2">
                <li><label class="down-nav-1" id="down-nav-2" for="drop-2" style="text-decoration:none">Pistols <b class="caret"> &#9660;</b></label></li>
                <div class="dropdown-menu-2">
                    <a href=?search=Glock-18&type=weapon><label class="glock-18" style="width:30px;height:23px;position:absolute;top:9.5px;left:4px;cursor:pointer;"></label>Glock-18</a>
                    <a href=?search=USP-S&type=weapon><label class="usp-s" style="width:30px;height:23px;position:absolute;top:59px;left:4px;cursor:pointer;"></label>USP-S</a>
                    <a href=?search=P2000&type=weapon><label class="p2k" style="width:30px;height:23px;position:absolute;top:106px;left:4px;cursor:pointer;"></label>P2000</a>
                    <a href=?search=Five-Seven&type=weapon><label class="five-seven" style="width:30px;height:23px;position:absolute;top:157px;left:4px;cursor:pointer;"></label>Five-SeveN</a>
                    <a href=?search=Desert%20Eagle&type=weapon><label class="desert-eagle" style="width:30px;height:23px;position:absolute;top:207px;left:4px;cursor:pointer;"></label>Desert Eagle</a>
                    <a href=?search=Tec-9&type=weapon><label class="tec9" style="width:30px;height:23px;position:absolute;top:258px;left:4px;cursor:pointer;"></label>Tec-9</a>
                    <a href=?search=CZ75-Auto&type=weapon><label class="cz75" style="width:30px;height:23px;position:absolute;top:307px;left:4px;cursor:pointer;"></label>CZ75-Auto</a>
                    <a href=?search=P250&type=weapon><label class="p250" style="width:30px;height:23px;position:absolute;top:357.5px;left:4px;cursor:pointer;"></label>P250</a>
                    <a href=?search=Dual%20Berettas&type=weapon><label class="dual_berettas" style="width:30px;height:30px;position:absolute;top:407px;left:4px;cursor:pointer;"></label>Dual Berettas</a>
                    <a href=?search=R8%20Revolver&type=weapon><label class="r8_revolver" style="width:30px;height:23px;position:absolute;top:461.5px;left:4px;cursor:pointer;"></label>R8 Revolver</a>
                </div>
            </div>
            <div class="dropdown-2">
                <input type="checkbox" value="drop" id="drop-3" class="dropper3">
                <li><label id="down-nav-3" class="down-nav-2" for="drop-3" style="text-decoration:none">SMGs <b class="caret"> &#9660;</b></label></li>
                <div class="dropdown-menu-3">
                    <a href=?search=P90&type=weapon><label class="p90" style="width:30px;height:23px;position:absolute;top:10px;left:8px;cursor:pointer;"></label>P90</a>
                    <a href=?search=MAC-10&type=weapon><label class="mac10" style="width:30px;height:23px;position:absolute;top:61px;left:8px;cursor:pointer;"></label>MAC-10</a>
                    <a href=?search=MP7&type=weapon><label class="mp7" style="width:30px;height:23px;position:absolute;top:111px;left:8px;cursor:pointer;"></label>MP7</a>
                    <a href=?search=MP9&type=weapon><label class="mp9" style="width:30px;height:23px;position:absolute;top:161px;left:8px;cursor:pointer;"></label>MP9</a>
                    <a href=?search=PP-Bizon&type=weapon><label class="pp-bizon" style="width:30px;height:23px;position:absolute;top:210px;left:8px;cursor:pointer;"></label>PP-Bizon</a>
                    <a href=?search=UMP-45&type=weapon><label class="ump45" style="width:30px;height:23px;position:absolute;top:261.5px;left:8px;cursor:pointer;"></label>UMP-45</a>
                </div>
            </div>
            <div class="dropdown-3">
                <input type="checkbox" value="drop" id="drop-4" class="dropper4">
                <li><label id="down-nav-4" class="down-nav-3" for="drop-4" style="text-decoration:none">Rifles <b class="caret"> &#9660;</b></label></li>
                <div class="dropdown-menu-4">
                    <a href=?search=AK-47&type=weapon><label class="ak47" style="width:30px;height:23px;position:absolute;top:9.5px;left:8px;cursor:pointer;"></label>AK-47</a>
                    <a href=?search=Galil%20Ar&type=weapon><label class="galil_ar" style="width:30px;height:23px;position:absolute;top:61px;left:8px;cursor:pointer;"></label>Galil AR</a>
                    <a href=?search=SG%20553&type=weapon><label class="sg553" style="width:30px;height:23px;position:absolute;top:111px;left:8px;cursor:pointer;"></label>SG 553</a>
                    <a href=?search=M4A4&type=weapon><label class="m4a4" style="width:30px;height:23px;position:absolute;top:161px;left:8px;cursor:pointer;"></label>M4A4</a>
                    <a href=?search=M4A1-S&type=weapon><label class="m4a1s" style="width:30px;height:23px;position:absolute;top:211.5px;left:8px;cursor:pointer;"></label>M4A1-S</a>
                    <a href=?search=AUG&type=weapon><label class="aug" style="width:30px;height:23px;position:absolute;top:261.5px;left:8px;cursor:pointer;"></label>AUG</a>
                    <a href=?search=Famas&type=weapon><label class="famas" style="width:30px;height:23px;position:absolute;top:311.5px;left:8px;cursor:pointer;"></label>Famas</a>
                </div>
            </div>
            <div class="dropdown-4">
                <input type="checkbox" value="drop" id="drop-5" class="dropper5">
                <li><label id="down-nav-5" class="down-nav-4" for="drop-5" style="text-decoration:none">Snipers <b class="caret"> &#9660;</b></label></li>
                <div class="dropdown-menu-5">
                    <a href=?search=AWP&type=weapon><label class="awp" style="width:30px;height:23px;position:absolute;top:9.5px;left:13.5px;cursor:pointer;"></label>AWP</a>
                    <a href=?search=SSG%2008&type=weapon><label class="ssg08" style="width:30px;height:23px;position:absolute;top:61px;left:13.5px;cursor:pointer;"></label>SSG 08</a>
                    <a href=?search=SCAR-20&type=weapon><label class="scar20" style="width:30px;height:23px;position:absolute;top:111px;left:13.5px;cursor:pointer;"></label>SCAR-20</a>
                    <a href=?search=G3SG1&type=weapon><label class="g3sg1" style="width:30px;height:23px;position:absolute;top:161px;left:13.5px;cursor:pointer;"></label>G3SG1</a>
                </div>
            </div>
            <div class="dropdown-5">
                <input type="checkbox" value="drop" id="drop-6" class="dropper6">
                <li><label id="down-nav-6" for="drop-6" class="down-nav-5" style="text-decoration:none">Heavy <b class="caret"> &#9660;</b></label></li>
                <div class="dropdown-menu-6">
                    <a href=?search=Nova&type=weapon><label class="nova" style="width:30px;height:23px;position:absolute;top:9.5px;left:13.5px;cursor:pointer;"></label>Nova</a>
                    <a href=?search=MAG-7&type=weapon><label class="mag-7" style="width:30px;height:23px;position:absolute;top:61px;left:13.5px;cursor:pointer;"></label>MAG-7</a>
                    <a href=?search=XM1014&type=weapon><label class="xm1014" style="width:30px;height:23px;position:absolute;top:111px;left:13.5px;cursor:pointer;"></label>XM1014</a>
                    <a href=?search=Sawed-Off&type=weapon><label class="sawed_off" style="width:30px;height:23px;position:absolute;top:161px;left:13.5px;cursor:pointer;"></label>Sawed-Off</a>
                    <a href=?search=Negev&type=weapon><label class="negev" style="width:30px;height:23px;position:absolute;top:211.5px;left:13.5px;cursor:pointer;"></label>Negev</a>
                    <a href=?search=M249&type=weapon><label class="m249" style="width:30px;height:23px;position:absolute;top:261.5px;left:13.5px;cursor:pointer;"></label>M249</a>
                </div>
            <div class="dropdown-6">
                <input type="checkbox" value="drop" id="drop-8" class="dropper8">
                <li><label id="down-nav-8" for="drop-8" class="down-nav-7" style="text-decoration:none">Other <b class="caret"> &#9660;</b></label></li>
                <div class="dropdown-menu-7">
                    <a href=?search=Keys&type=weapon><label class="keys" style="width:30px;height:30px;position:absolute;top:6px;left:13.5px;cursor:pointer;"></label>Keys</a>
                    <a href=?search=Cases&type=weapon><label class="cases" style="width:30px;height:23px;position:absolute;top:61px;left:13.5px;cursor:pointer;"></label>Cases</a>
                    <a href=?search=Passes&type=weapon><label class="passes" style="width:30px;height:23px;position:absolute;top:105.5px;left:13.5px;cursor:pointer;"></label>Passes</a>
                    <a href=?search=Capsules&type=weapon><label class="capsules" style="width:30px;height:23px;position:absolute;top:156.5px;left:13.5px;cursor:pointer;"></label>Capsules</a>
                    <a href=?search=Pins&type=weapon><label class="pins" style="width:30px;height:30px;position:absolute;top:207px;left:13.5px;cursor:pointer;"></label>Pins</a>
                    <a href=?search=Packages&type=weapon><label class="packages" style="width:30px;height:14px;position:absolute;top:264.5px;left:13.5px;cursor:pointer;"></label>Packages</a>
                    <a href=?search=Stickers&type=weapon><label class="stickers" style="width:30px;height:30px;position:absolute;top:308px;left:13.5px;cursor:pointer;"></label>Stickers</a>
                    <a href=?search=Music%20Kits&type=weapon><label class="music_kits" style="width:30px;height:34px;position:absolute;top:356.5px;left:13.5px;cursor:pointer;"></label>Music Kits</a>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="searchbox">
    <div class="mover">
        <form action="/" method="post">
        <input type='hidden' name='csrfmiddlewaretoken' value='1F0UM2vB8b0FSJIUzw3r1hdOSjNFjclWX4tqvQJUbfqIcqvMiHUOKDkJgVv9AZiZ' />
        <input type="text" name="searchfield" class="search" placeholder="Search Item">
        <div class="mover1">
            <div class="statbox">
                <select name="sbox1" class="selectbox" id="stattrak">
                    <option value="any"></option>
                    <option value="true">Yes</option>
                    <option value="false">No</option>
                </select>
                <label class="stattext" for="stattrak">StatTrak™ <b class="caret_left">&#9654;</b></label>
            </div>
        </div>
        <div class="mover2">
            <div class="conbox">
                <select name="sbox2" class="selectbox" id="condition">
                    <opgroup>
                        <option value="any"></option>
                        <option value="vanilla">Vanilla</option>
                        <option value="fn">Factory New</option>
                        <option value="mw">Minimal Wear</option>
                        <option value="ft">Field-Tested</option>
                            <option value="ww">Well-Worn</option>
                        <option value="bs">Battle-Scarred</option>
                    </opgroup>
                </select>
                <label class="context" for="condition">Condition</label>
                <b class="caret_center">&#9650;</b>
            </div>
        </div>
        <div class="mover3">
            <div class="rarbox">
                <select name="sbox3" class="selectbox" id="rarity">
                    <optgroup>
                        <option value="any"></option>
                        <option value="base">Base Grade</option>
                        <option value="high">High Grade</option>
                        <option value="exotic">Exotic</option>
                        <option value="remarkable">Remarkable</option>
                        <option value="extraordinary">Extraordinary</option>
                        <option value="consumer">Consumer Grade</option>
                        <option value="industrial">Industrial Grade</option >
                        <option value="mil-spec">Mil-Spec</option>
                        <option value="restricted">Restricted</option>
                        <option value="classified">Classified</option>
                        <option value="covert">Covert</option>
                        <option value="melee">★ Melee</option>
                        <option value="contraband">Contraband</option>
                    </optgroup>
                </select>
                <label class="rartext" for="rarity"><b class="caret_left">&#9664;</b> Rarity</label>
            </div>
        </div>
        <div class="mover4">
            <div class="souvbox">
                <select  name="sbox4" class="selectbox" id="souvenir">
                    <option value="any"></option>
                    <option value="true">Yes</option>
                    <option value="false">No</option>
                </select>
                <label class="souvtext" for="souvenir">Souvenir <b class="caret_left">&#9654;</b></label>
            </div>
        </div>
        <div class="mover5">
            <div class="stickbox">
                <select name="sbox5" class="selectbox" id="stickers">
                    <option value="any"></option>
                    <option value="true">Yes</option>
                    <option value="false">No</option>
                </select>
                <label class="sticktext" for="stickers"><b class="caret_left">&#9664;</b> Stickers</label>
            </div>
        </div>
        <div class="mover6">
            <div class="price_min">
                <input name="pbox1" type="number" class="pmin" min="0.01" step="0.01">
                <label class="mintext">Price (Min) <b class="caret_left">&#9654;</b></label>
            </div>
        </div>
        <div class="mover7">
            <div class="price_max">
                <input name="pbox2" type="number" class="pmax" min=0.01 step="0.01">
                <label class="maxtext"><b class="caret_left">&#9664;</b> Price (Max)</label>
            </div>
        </div>
        <div class="mover8">
            <div class="sortbox">
                <select name="sbox6" class="selectbox" id="sort_by">
                    <option value="featured">Featured</option>
                    <option value="newest_to_oldest">Date: Newest &#8594; Oldest</option>
                    <option value="oldest_to_newest">Date: Oldest &#8594; Newest</option>
                    <option value="highest_to_lowest">Price: Highest &#8594; Lowest</option>
                    <option value="lowest_to_highest">Price: Lowest &#8594; Highest</option>
                    <option value="w_lowest_to_highest">Wear: Lowest &#8594; Highest</option>
                    <option value="w_highest_to_lowest">Wear: Highest &#8594; Lowest</option>
                </select>
                <label class="sorttext">Sort By</label>
                <b class="caret_center">&#9650;</b>
            </div>
        <div class="mover9">
            <input type="submit" name="submit_search" class="submitsearch" value="Search">
        </div>
        </div>
        </form>
    </div>
</div>
</ul>

I have also tried github autoprefixer for body style which didn't solve my problem.

How could i make display: flex compatible with Safari or it's Webkit layout engine? I also don't know why doesn't display: -webkit-flex; work on Safari 9.1.2, neither does -webkit-box. Is there anything other to be used? If i do not need vendor prefixes on 9.1.2, then why doesn't normal display: flex; work?

So basically, what can the main problem be? i couldn't find anything relevant with my specific problems yet (Width is 100% and i use vendor prefixes for flex).

ShellRox
  • 2,532
  • 6
  • 42
  • 90
  • 1
    Older safari uses `-webkit-box-` , not `flex`. There is a good guide here. https://css-tricks.com/using-flexbox/ – pol Dec 29 '16 at 13:12
  • Hello, thanks for comment. I use new Safari though, and when i added `-webkit-box-` it didn't work :(. – ShellRox Dec 29 '16 at 13:19
  • 1
    Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a [**Stack Snippet**](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/). Although you have provided a [**link to an example or site**](http://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-doesnt-work-can-i-just-paste-a-link-to-it), if the link were to become invalid, your question would be of no value to other future SO users with the same problem. – Paulie_D Dec 29 '16 at 13:21
  • 2
    You should provide a [mcve] in the question (what HTML does this apply to?) and specify which versions of Safari you are testing in. "new Safari" is rather vague. – Quentin Dec 29 '16 at 13:24
  • @Paulie_D Thanks for the feedback, i have updated the answer. Also full code can be visible by "view source" option, but i have already included code nessecary for the question. – ShellRox Dec 29 '16 at 14:06
  • @Quentin Thanks! updated the answer and included the version of Safari too. – ShellRox Dec 29 '16 at 14:07
  • 1
    You wrote: *I also don't know why doesn't `display: -webkit-flex;` works on Safari 9.1.2, neither does `-webkit-box`.* You don't need vendor prefixes to run flexbox in Safari 9. – Michael Benjamin Dec 29 '16 at 14:23
  • 1
    see here for more details: [Flexbox code working on all browsers except Safari. Why?](http://stackoverflow.com/a/35137869/3597276) – Michael Benjamin Dec 29 '16 at 14:24
  • @Michael_B Hello, i don't see my code being similar to their code, i don't use max-width, but i use width: 100%, which after it's removal didn't fix the problem at all. Also why does not normal `display: flex` work then? – ShellRox Dec 29 '16 at 14:42
  • Before start figure why a CSS rule might or might not work, your markup has some serious syntax error, like the only allowed child of an `ul` is `li`, and you use them mixed as any other element. Start with making the syntax valid, then it all maybe will work. – Asons Jan 03 '17 at 20:35
  • @LGSon Thanks, i have changed them and they are different now. – ShellRox Jan 04 '17 at 09:33

0 Answers0