1

Im creating a radial play button for my player And I use css flex for centering the play icon. Its working fine in chrome but not in safari browser.

enter image description here

In my css I have something like this:

.inset {
     width: @inset-size;
     height: @inset-size;
     position: absolute;
     margin-left: 20px;
     margin-top: 20px;
     background-color: @circle-background;
     border-radius: 50%;
     border: 3px solid #192D48;
     font-size: 50px;

     display: -webkit-box;
     display: -moz-box;
     display: -ms-flexbox;
     display: -webkit-flex;
     display: flex;       
     justify-content: space-around;
     -webkit-justify-content: space-around;

     i {
       -webkit-align-self: center;
       align-self: center;
       color: black !important;
       top: 0px;
       left: 1px;
     }
}

I already added display: -webkit-flex; to support flex in safari but unluckily it doesnt work and when I checked it in the debugger styles of safari there is no display: -webkit-flex; on it but space -webkit-justify-around appear.

enter image description here

but when I hardcoded it in style like this:

   <div class='scr-button radial-progress'>
      <div class="circle-gray"></div>
      <div class="circle">
        <div class="circle-white"></div>
        <div class="mask full" ng-style="{'transform': currTime}">
          <div class="fill" ng-style="{'transform': currTime}"></div>
        </div>
        <div class="mask half">
          <div class="fill" ng-style="{'transform': currTime}"></div>
          <div class="fill fix" ng-style="{'transform': currTime * 2}" ></div>
        </div>
      </div>
      <div class="inset" ng-click="play()" style="display: -webkit-flex;">
        <i ng-class="icon()"></i>
      </div>
  </div>

Its working fine, can someone explain me why it doesnt work when I put it on a class? Is it browser issue? Or Im doing it wrong?

Specs: Less, Safari Version: Version 8.0.8, Angularjs

Vicruz
  • 321
  • 1
  • 12
  • Possible duplicate of [Flexbox not working on iPad and Safari](http://stackoverflow.com/questions/33502774/flexbox-not-working-on-ipad-and-safari) – Michael Benjamin Nov 05 '15 at 13:09
  • Always better to put prefixed versions before un-prefixed versions. http://stackoverflow.com/q/7080605/3597276 – Michael Benjamin Nov 05 '15 at 13:12
  • 1
    I already alternate the unprefixed and prefixed, but its still the same. I also try removing my css and replace it with the Autoprefixer and also the same. Thanks everyone – Vicruz Nov 06 '15 at 02:28
  • Looking at your CSS code above, you have a syntax error. The closing bracket `}` for `.inset` is coming after the `i { ... }` rule. You need to close the rules properly: `.inset { ... }` and `i { .... }`, *NOT* `.inset { ... i { ... } }` – Michael Benjamin Nov 06 '15 at 04:08
  • 2
    I'm using Less css, so what I'm trying to target is the child i(html tag) of element that has class inset. Safari still doesn't recognise -webkit-flex but when I put it at style its working, I try to put it in `id` but still the same with the class. Thanks @Michael_B for answering my question – Vicruz Nov 06 '15 at 04:19

0 Answers0