Transform not Working on IOS

Question

So I am facing this little problem implement this code on iOS because I am not familiar how iOS works. I have this circle which I am using on my website and its working perfect on browsers and android devices but when it comes to iOS it breaks down and all of the degree's come to center. I'll be glad if someone could help me out on this one ..

The HTML

<div class='circle-container'>   
    <div class="center"> Center </div>
    <div class="deg90">1</div>
    <div class="deg315">2</div>
    <div class="deg0">3</div>
    <div class="deg110">4</div>
    <div class="deg135">5</div>
    <div class="deg180">6</div>
    <div class="deg225">7</div>
</div>

The CSS:

.circle-container {
    position: relative;
    width: 15em;
    height: 14em;
    padding: 2.8em;
    /*2.8em = 2em*1.4 (2em = half the width of a link with img, 1.4 = sqrt(2))*/
    border: dashed 0px;
    border-radius: 50%;

}
.circle-container > a {
    display: block;
    text-decoration: none;
    position: absolute;
    top: 50%; left: 50%;
    width: 4em; height: 4em;
    margin: -2em;

    text-align: center;
}

.circle-container div {
    display: block;
    text-decoration: none;
    position: absolute;
    top: 50%; left: 50%;
    width: 4em; height: 4em;
    margin: -2em;
    text-align: center;
}
.circle-container img { display: block; width: 100%; height:320px; position:absolute; margin-left:-25px; margin-top:15px;}
.deg0 { transform: translate(5.2em); } /* 12em = half the width of the wrapper */
.deg45 { transform: rotate(45deg) translate(5.4em) rotate(-45deg); }
.deg90 { transform: rotate(-90deg) translate(5em) rotate(90deg); }
.deg110 { transform: rotate(45deg) translate(5em) rotate(-45deg); }
.deg135 { transform: rotate(135deg) translate(5em) rotate(-135deg); }
.deg180 { transform: translate(-5em); }
.deg225 { transform: rotate(225deg) translate(5em) rotate(-225deg); }
.deg315 { transform: rotate(315deg) translate(5em) rotate(-315deg); }

Thanks ..

Answer 1

iOS doesn't require transform prefixes anymore. Nevertheless, I found out there are still some issues on SVGs. For example, translateY is not working for <text/> element inside an <svg/>.

As a workaround, the element can be wrapped in a <g>

Answer 2

Another possible issue here (when iOS seems to be ignoring a transform) is a bug in some versions of iOS where rotations that are an exact multiple of 90 degrees are ignored.

The solution that worked for me was to use a transform of 89.9 degrees instead (89.9 degrees worked as expected; 90 degrees produced no rotation at all). Not ideal, but in my case the difference wasn't noticeable.

Answer 3

iOS safari still requires browser prefixes for transform

Duplicate all of your transforms and add a -webkit- prefixed version before

Example

.deg0 { 
    -webkit-transform: translate(5.2em);
    transform: translate(5.2em);
}

Working demo

Answer 4

Found the problem, it was a silly one. I didn't use -webkit which is supported for iOS. Below is the solved JS Fiddle if anyone needs it ..

.circle-container {
    position: relative;
    width: 15em;
    height: 14em;
    padding: 2.8em;
    /*2.8em = 2em*1.4 (2em = half the width of a link with img, 1.4 = sqrt(2))*/
    border: dashed 0px;
    border-radius: 50%;

}
.circle-container > a {
    display: block;
    text-decoration: none;
    position: absolute;
    top: 50%; left: 50%;
    width: 4em; height: 4em;
    margin: -2em;

    text-align: center;
}

.circle-container div {
    display: block;
    text-decoration: none;
    position: absolute;
    top: 50%; left: 50%;
    width: 4em; height: 4em;
    margin: -2em;
    text-align: center;
}
.circle-container img { display: block; width: 100%; height:320px; position:absolute; margin-left:-25px; margin-top:15px;}
.deg0 { 
    transform: translate(5.2em); 
    -webkit-transform: translate(5.2em); 
    -ms-transform:  translate(5.2em);
} /* 12em = half the width of the wrapper */
.deg45 { 
    transform: rotate(45deg) translate(5.4em) rotate(-45deg);
    -webkit-transform: rotate(45deg) translate(5.4em) rotate(-45deg);
    -ms-transform: rotate(45deg) translate(5.4em) rotate(-45deg); 
}
.deg90 { 
    transform: rotate(-90deg) translate(5em) rotate(90deg);
    -webkit-transform: rotate(-90deg) translate(5em) rotate(90deg);
    -ms-transform: rotate(-90deg) translate(5em) rotate(90deg);
}
.deg110 { 
    transform: rotate(45deg) translate(5em) rotate(-45deg);
    -webkit-transform: rotate(45deg) translate(5em) rotate(-45deg);
    -ms-transform: rotate(45deg) translate(5em) rotate(-45deg);
 }
.deg135 {
    transform: rotate(135deg) translate(5em) rotate(-135deg);
    -webkit-transform: rotate(135deg) translate(5em) rotate(-135deg);
    -ms-transform: rotate(135deg) translate(5em) rotate(-135deg); 
}
.deg180 { 
    transform: translate(-5em); 
    -webkit-transform: translate(-5em);
    -ms-transform: translate(-5em); 
}
.deg225 { 
    transform: rotate(225deg) translate(5em) rotate(-225deg);
   -webkit-transform: rotate(225deg) translate(5em) rotate(-225deg);
   -ms-transform: rotate(225deg) translate(5em) rotate(-225deg); 
}
.deg315 { 
    transform: rotate(315deg) translate(5em) rotate(-315deg);
    -webkit-transform: rotate(315deg) translate(5em) rotate(-315deg);
    -ms-transform: rotate(315deg) translate(5em) rotate(-315deg);
}