आईओएस

Question

पर कार्य नहीं तो मैं क्योंकि मैं परिचित कैसे आईओएस काम करता है नहीं कर रहा हूँ इस छोटे से समस्या iOS पर इस कोड को लागू का सामना करना पड़ रहा रूपांतरण। मेरे पास यह सर्कल है जिसका मैं अपनी वेबसाइट पर उपयोग कर रहा हूं और यह ब्राउज़र और एंड्रॉइड डिवाइस पर सही काम कर रहा है, लेकिन जब आईओएस की बात आती है तो यह टूट जाती है और सभी डिग्री केंद्र में आती हैं। मुझे खुशी है कि अगर किसी को इस पर मुझे बाहर मदद कर सकता है हो जाएगा ..

एचटीएमएल

<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> 

सीएसएस:

.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); } 

धन्यवाद ..

Answer 1

समस्या पाया जाता है, यह एक मूर्खतापूर्ण था। मैंने -webkit का उपयोग नहीं किया जो iOS के लिए समर्थित है। नीचे हल किया जाता है JS Fiddle अगर कोई यह की जरूरत है ..

.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); 
} 

Answer 2

iOS safari अभी भी के लिए transform

डुप्लिकेट अपने रूपांतरण के सभी ब्राउज़र उपसर्गों की आवश्यकता है और इससे पहले कि

उदाहरण

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

एक -webkit- पहले से जुड़ा हुआ संस्करण जोड़ने

Working demo

Answer 3

यहाँ एक अन्य संभावित मुद्दा आईओएस के कुछ संस्करणों जहां रोटेशन कि 90 डिग्री के एक सटीक एकाधिक हैं अनदेखी कर रहे हैं में एक बग है (जब आईओएस एक को बदलने की अनदेखी कर किया जा रहा है)।

समाधान है कि मेरे लिए काम किया (; 90 डिग्री सभी में कोई रोटेशन का उत्पादन 89.9 डिग्री की उम्मीद के रूप में काम) एक 89.9 डिग्री के बजाय बदलने का इस्तेमाल किया गया। आदर्श नहीं है, लेकिन मेरे मामले में अंतर ध्यान देने योग्य नहीं था।