sass - Safari flex-box -


trying make responsive layout app flexbox. flexbox working incorrect @ safari. when direction row, working right. column layout broken. having not idea why. tried changing prefixes.(not autoprefix problem)

at chrome: gif

at safari: gif

sass: 

$right-section-color: #98ee99 $left-section-color: fade_out(grey,0.8) $font-color: fade_out(black,0.3)  .allsection   width: 100%   color: $font-color   .banner     @extend .bannersection   .section     display: flex     justify-content: center     flex-direction: row     span       margin: auto       padding: 0       flex: 1     .imagewithtext       flex: 1       margin: auto       display: flex       flex-direction: column       text-align: center       img         max-width: 10em         height: 100%         width: 100%         margin: auto     .text       flex: 1       margin: auto   @for $i 1 through 5     @if($i % 2 == 0)       .section:nth-child(#{$i})         background-color: $left-section-color         @media #{$small-and-down}           flex-direction: column     @else       .section:nth-child(#{$i})         background-color: $right-section-color         @media #{$small-and-down}           flex-direction: column-reverse

jsx:

<element name="allsection" classname="allsection">     <div classname="banner">         <h3>Диспоузер status це</h3>     </div>     <div classname="section">         <div classname="imagewithtext">             <img src={ecologo} id='ecologo' alt="eco logo" />             <span>Екологічно</span>         </div>         <div classname="text">             <span>Використання подрібнювача скорочує обсяг перевезеного на звалища сміття. Крім того, харчові                             відходи є сировиною для виробництва біогазу. </span>         </div>     </div>     <div classname="section">         <div classname="text">             <span>Подрібнювачі миттєво усувають харчові відходи c кухні. Тепер не потрібно зберігати їх в сміттєвому відрі - джерелі неприємних запахів і бактерій.</span>         </div>         <div classname="imagewithtext">             <img src={wastedfood} alt="wasted food" />             <span>Гігієнічно</span>         </div>     </div>     <div classname="section">         <div classname="imagewithtext">             <img src={kitchenpicture} alt="kitchen washer" />             <span>Практично</span>         </div>         <div classname="text">             <span>Подрібнювач акуратно і легко встановлюється під раковину і не вимагає додаткових площ на                             кухні. </span>         </div>     </div>     <div classname="section">         <div classname="text">             <span>Подрібнювач абсолютно безпечний для дітей і дорослих. Всередині немає ножів і шнеків.                             Додаткову електробезпеку забезпечує пневмовимикач. </span>         </div>         <div classname="imagewithtext">             <img src={safetyicon} alt="wasted food" />             <span>Безпечно</span>         </div>     </div> </element>

app created react-create-app, have autoprefixer. how can fix layout in safari?

update:

when setting width 50% of element want layout, working. how can make flex: 1?


Comments

Post a Comment

Popular posts from this blog

Is there a better way to structure post methods in Class Based Views -

i'm using class based views in django , never specify url in ajax calls , omit action parameter in form because know these requests go through post method of class based view. notice view - profile page make many requests depending on user updating on page - post method become convoluted , if/else mess example: def post(self, request, *args, **kwargs): # handle user changing available date if request.post.get('availabledate') != none: self.updateavailabledate(request) return jsonresponse({'result':'success'}) if request.post.get('newprojectname') != none: creative_user = creativeuserprofile.objects.get(id = request.user.id) project = project.create_project(creative_user, request.post['newprojectname']) project.save() return jsonresponse({'projectid': project.id }) if request.post.get('projectimage') != none , request.files['file']: proj
Read more

performance - Why is XCHG reg, reg a 3 micro-op instruction on modern Intel architectures? -

i'm doing micro-optimization on performance critical part of code , came across sequence of instructions (in at&t syntax): add %rax, %rbx mov %rdx, %rax mov %rbx, %rdx i thought had use case xchg allow me shave instruction , write: add %rbx, %rax xchg %rax, %rdx however, dimay found agner fog's instruction tables , xchg 3 micro-op instruction 2 cycle latency on sandy bridge, ivy bridge, broadwell, haswell , skylake. 3 whole micro-ops , 2 cycles of latency! 3 micro-ops throws off 4-1-1-1 cadence , 2 cycle latency makes worse original in best case since last 2 instructions in original might execute in parallel. now... cpu might breaking instruction micro-ops equivalent to: mov %rax, %tmp mov %rdx, %rax mov %tmp, %rdx where tmp anonymous internal register , suppose last 2 micro-ops run in parallel latency 2 cycles. given register renaming occurs on these micro-architectures, though, doesn't make sense me done way. why wouldn't register renamer
Read more

jquery - Responsive Navbar with Sub Navbar -

good day, forgive me nav vocabulary not best. if question confusing apologize. i'm working on navigation bar needs centered on page @ 768px , above. items in nav open (or perhaps toggle) subnav lives directly below. these nav should appear centered on page. i have been able work through responsive portion of nav bar, having main items align vertically , sub nav menu of each item roll out below, , gave them indent separation. working well. however, issue not responsive side, behavior @ width greater 768px. happens toggling menu's sub navigation pushes other main items down page below sub nav. here's code: $(document).ready(function () { //stick in fixed 100% height behind navbar don't wrap $('#slide-nav.navbar-inverse').after($('<div class="inverse" id="navbar-height-col"></div>')); $('#slide-nav.navbar-default').after($('<div id="navbar-height-col"></d
Read more