这是我的应用的控制卡。它可以在chrome和Firefox上正常运行，但在苹果的safari浏览器上，背景卡（通过单击botton按钮）将前卡中的所有元素重叠在背景上。我尝试了很多事情，但无法获得任何解决方案。任何帮助将不胜感激。 Look in Safari
function letsrotate(ida,p1) {
document.getElementById(ida).style.transform = 'rotateY(' + p1 + ')';
document.getElementById(ida).style.WebkitTransform = 'rotateY(' + p1 + ')';
document.getElementById(ida).style.msTransform = 'rotateY(' + p1 + ')';
}* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
body {
background-color: #ecf0f1; }
.mrg {
margin-left: 3%;
margin-bottom: 2%;
}
.crds {
margin-bottom: -35%;
}
#navbar-container {
height: 41px;
}
@media screen and (min-width: 425px) and (max-width: 600px) {
.modal-content {
width: 50% !important;
}
.scroll-top.in {
display: none !important;
}
.navbar-header {
width: 30%;
}
.navbar-content {
width: 71%;
top: -39px;
left: 30% !important;
height: 100%;
}
.last{
left: 0% !important;
}
}
@media screen and (max-width: 424px) {
.modal-content {
width: 60% !important;
}
#footer {
height : unset !important;
}
.dropdown-menu-md {
width: 135%;
min-width: 370% !important;
}
.scroll-top.in {
display: none !important;
}
.navbar-header {
width: 15%;
}
.navbar-content {
width: 85%;
top: -39px;
left: 17% !important;
height: 100%;
}
.last{
left: 0% !important;
}
}
@media only screen and (min-width: 600px) and (max-width: 767px){
.modal-content {
width: 40% !important;
}
.scroll-top.in {
display: none !important;
}
.navbar-header {
width: 24%;
}
.navbar-content {
width: 76%;
top: -39px;
left: 24% !important;
height: 100%;
}
.last{
left: 0% !important;
}
}
.navbar-header {
left: 0;
position: relative;
float: none;
background-color: #fff;
}
.navbar-content {
position: relative;
left: 0;
background-color: #fff;
}
header {
display: block;
overflow: hidden;
position: relative;
padding-bottom: 2em;
-moz-border-radius-topleft: 8px;
-webkit-border-top-left-radius: 8px;
border-top-left-radius: 8px;
-moz-border-radius-topright: 8px;
-webkit-border-top-right-radius: 8px;
border-top-right-radius: 8px; }
.container1 {
width: 320px;
margin: 1em auto 1em auto;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-ms-border-radius: 8px;
-o-border-radius: 8px;
border-radius: 8px;
padding-bottom: 1.5em;
background-color: #dde1e2;
-webkit-box-shadow: #bdc3c7 0 5px 5px;
-moz-box-shadow: #bdc3c7 0 5px 5px;
box-shadow: #bdc3c7 0 5px 5px; }
.bg {
border-bottom: 8px solid #5cc0ff; }
.bio:hover > .desc {
cursor: pointer;
opacity: 1; }
.avatarcontainer {
position: absolute;
bottom: 0;
right: 0;
left: 0;
margin: auto;
width: 70px;
height: 70px;
display: block; }
.avatarcontainer:hover > .hover {
opacity: 1; }
.avatar {
width: 100%;
border: 8px solid #5cc0ff;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
overflow: hidden;
position: relative; }
.avatar img {
width: 65px;
height: 65px; }
.avatar:hover + .hover {
opacity: 1;
cursor: pointer; }
.hover {
position: absolute;
cursor: pointer;
width: 100%;
height: 100%;
background-color: #3498db;
top: 0;
font-size: 1.8em;
text-align: center;
color: white;
padding-top: 18%;
opacity: 0;
font-family: 'FontAwesome';
font-weight: 300;
border: 8px solid #5cc0ff;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
-webkit-transition-property: all;
-moz-transition-property: all;
-o-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
transition-duration: 0.5s;
-webkit-transition-timing-function: ease;
-moz-transition-timing-function: ease;
-o-transition-timing-function: ease;
transition-timing-function: ease; }
.data {
margin-top: .6em;
color: #81878b;
left: -20px;
position: relative;
}
.data li {
width: 32%;
text-align: center;
display: inline-block;
font-size: 1.5em;
font-family: 'Lato';
border-right: solid 1px #bdc3c7; }
.data li:last-child {
border: none; }
.data li span {
display: block;
text-transform: uppercase;
font-family: 'Quicksand';
font-size: .5em;
margin-top: .6em;
font-weight:700;
}
.desc {
position: absolute;
top: 0;
background-color: rgba(0, 0, 0, 0.6);
width: 100%;
height: 107px;
padding: 1.2em 1em 0 1em;
color: white;
text-align: center;
opacity: 0;
-webkit-transition-property: all;
-moz-transition-property: all;
-o-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-in;
-moz-transition-timing-function: ease-in;
-o-transition-timing-function: ease-in;
transition-timing-function: ease-in; }
.desc h3 {
font-family: "Lato";
font-size: 1.2em;
margin-bottom: .5em; }
.desc p {
font-size: .9em;
font-family: 'Quicksand';
line-height: 1.5em; }
.follow {
margin: 1.5em auto 0 auto;
background-color: #fe1a01;
width: 150px;
color: white;
font-family: "Lato";
text-align: center;
padding: .5em;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
-webkit-transition-property: all;
-moz-transition-property: all;
-o-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease;
-moz-transition-timing-function: ease;
-o-transition-timing-function: ease;
transition-timing-function: ease;
height: 35px;
}
.follow:hover {
background-color: #167abd;
cursor: pointer;
}
.col1 {
display: block;
margin-left: auto;
margin-right: auto;
display: table;
}
.col2{
width : 45%;
float: left;
}
p{
font-size: 10pt;
}
.misc
{
font-size: 9pt;
}
h2{
margin-bottom: 0;
}
a:link{
color:#0095DD;
}
.flipBtnWrapper{
width: 90%;
height: 90%;
position: relative;
float: left;
margin: 6% 4%;
}
.flipBtn, .flipBtn_checkbox, .flipBtn_face{
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
}
.flipBtn {
transition: transform 2s cubic-bezier(1, 0.02, 0, 1.44);
-webkit-transition: -webkit-transform 2s cubic-bezier(1, 0.02, 0, 1.44);
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
pointer-events: none;
}
.flipBtnWrapper:hover > .flipBtn{
box-shadow: 0px 0px 4px #828282;
}
.flipBtn_back{
transform: translateZ( -1px );
-webkit-transform: translateZ( -1px );
}
.flipBtn_front{
transform: translateZ( 1px );
-webkit-transform: translateZ( 1px );
backface-visibility: hidden;
}
.flipBtn_back, .flipBtn_front{
background-repeat: no-repeat;
background-position: center;
}
.flipBtn_checkbox{
opacity: 0;
cursor: pointer;
}
/* Demo No 1 */
img.avatarback {
width: 100%;
border: 8px solid #5cc0ff;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
overflow: hidden;
position: relative;
top: 0px;
left: 0px;
}
.flipBtn_mid.demo1{
height: 20px;
background-color: #d5485a;
transform: rotateX(90deg);
-webkit-transform: rotateX(90deg);
top: -10px;
}
.flipBtn_checkbox:checked + .flipBtn.demo1{
transform: rotatey( -180deg );
-webkit-transform: rotatey( -180deg );
}
/*-=-=-=-=-=-=-=-=-=-=-=- */
/* Column Grids */
/*-=-=-=-=-=-=-=-=-=-=-=- */
.col_half { width: 49%; }
.col_third { width: 32%; }
.col_fourth { width: 180px; }
.col_fifth { width: 18.4%; }
.col_sixth { width: 15%; }
.col_three_fourth { width: 74.5%;}
.col_twothird{ width: 66%;}
.col_half,
.col_third,
.col_twothird,
.col_fourth,
.col_three_fourth,
.col_fifth{
position: relative;
display:inline;
display: inline-block;
float: left;
margin-right: 2%;
margin-bottom: 20px;
}
.end { margin-right: 0 !important; }
/* Column Grids End */
.wrapper { width: 980px; margin: 30px auto; position: relative;}
.counter { background-color: #fd1a014d; padding: 30px 0; border-radius: 5px;}
.count-title { font-size: 200%; font-weight: normal; margin-top: 10px; margin-bottom: 0; text-align: center; }
.count-text { font-size: 13px; font-weight: normal; margin-top: 10px; margin-bottom: 0; text-align: center; }
.fa-2x { margin: 0 auto; float: none; display: table; color: #4ad1e5; }
.wrapper-dropdown-3 {
position: relative;
width: 57px;
margin: 0 auto;
padding: 8px;
background: rgb(254, 26, 1);
border-radius: 7px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
cursor: pointer;
outline: none;
font-weight: bold;
color: #000;
right: -74px;
height: 35px;
}
.wrapper-dropdown-3:after {
content: "";
width: 0;
height: 0;
position: absolute;
right: 15px;
top: 50%;
margin-top: -3px;
border-width: 6px 6px 0 6px;
border-style: solid;
border-color: #fff transparent;
}
.wrapper-dropdown-3 .dropdown {
position: absolute;
top: 140%;
left: -61px;
right: 0;
background: white;
border-radius: inherit;
border: 1px solid rgba(0,0,0,0.17);
box-shadow: 0 0 5px rgba(0,0,0,0.1);
font-weight: normal;
transition: all 0.5s ease-in;
list-style: none;
opacity: 0;
pointer-events: none;
width: 120px;
pointer-events: none;
}
.wrapper-dropdown-3 .dropdown li a {
display: block;
padding: 8px;
text-decoration: none;
color: #8aa8bd;
border-bottom: 1px solid #e6e8ea;
box-shadow: inset 0 1px 0 rgba(255,255,255,1);
transition: all 0.3s ease-out;
}
.wrapper-dropdown-3 .dropdown li i {
float: right;
color: inherit;
}
.wrapper-dropdown-3 .dropdown li:first-of-type a {
border-radius: 7px 7px 0 0;
}
.wrapper-dropdown-3 .dropdown li:last-of-type a {
border-radius: 0 0 7px 7px;
border: none;
}
/* Hover state */
.wrapper-dropdown-3 .dropdown li:hover a {
background: #f3f8f8;
}
.wrapper-dropdown-3 .dropdown:after {
content: "";
width: 0;
height: 0;
position: absolute;
bottom: 100%;
right: 15px;
border-width: 0 6px 6px 6px;
border-style: solid;
border-color: #fff transparent;
}
.wrapper-dropdown-3 .dropdown:before {
content: "";
width: 0;
height: 0;
position: absolute;
bottom: 100%;
right: 13px;
border-width: 0 8px 8px 8px;
border-style: solid;
border-color: rgba(0,0,0,0.1) transparent;
}
.wrapper-dropdown-3.active .dropdown {
opacity: 1;
pointer-events: auto;
}
*{
transition: all 0.2s ease-in-out 0s;
-webkit-transition: all 0.2s ease-in-out 0s;
}
.card:hover{
transform: scale(1.04) translateY(-5px);
-webkit-transform: scale(1.04) translateY(-5px);
}
.card:hover .image,
.card:hover .shadow {
background-size: 103%;
}
.card:hover .shadow {
transform: scale(0.85) translateY(40px);
-webkit-transform: scale(0.85) translateY(40px);
-webkit-filter: blur(30px);
filter: blur(30px);
}
.pricing .pricing-title {
font-size: 1.3em;
font-weight: 700;
text-transform: uppercase;
color: #4d627b;
}
.pricing {
text-align: center;
}
.pricing .pricing-price {
margin: 25px 0;
}
.pricing .pricing-price span:first-child {
font-size: 4.5em;
vertical-align: -.5em;
}
.text-normal {
font-weight: normal;
}
.pricing .pricing-price span:not(:first-child) {
font-size: 1.2em;
font-weight: 700;
}
.pricing .pricing-list {
list-style: none;
padding: 0;
margin: 25px 0;
}
.pricing .pricing-list li {
padding: 5px 0;
color: #4d627b;
}
.pricing .pricing-list strong {
color: #4d627b;
}
.btn-purple, .btn-purple:focus {
background-color: #b052c0;
border-color: #ab47bc !important;
color: #fff;
}
.ribbon {
position: absolute;
right: -5px;
top: -5px;
z-index: 0;
overflow: hidden;
width: 75px;
height: 75px;
text-align: right;
}.ribbon span {
font-size: 10px;
font-weight: bold;
color: #FFF;
text-transform: uppercase;
text-align: center;
line-height: 20px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
width: 100px;
display: block;
background: #E53F50;
box-shadow: 0 3px 10px -5px #000;
position: absolute;
top: 19px;
right: -21px;
}
.pricing .panel > .panel-body {
padding: 20px;
}
.panel .panel-footer, .panel > :last-child {
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
}
.panel-body {
padding: 15px 20px 25px;
}
.panel-body {
padding: 15px;
}
.container1.back {
position: relative;
top: -420px;
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
}
.innercard {
transition: all 0.8s ease-in-out 0s;
transform-style: preserve-3d;
-webkit-transition: all 0.8s ease-in-out 0s;
-webkit-transform-style: preserve-3d;
}
.container1
{
backface-visibility: hidden;
}
.container1
{
-webkit-backface-visibility: hidden;
}
.material-icons.rotate {
position: relative;
top: -15px;
left: 258px;
cursor: pointer;
}
.onb {
position: fixed;
top: 19%;
left: 34%;
z-index: 1000;
}
.onbt {
position: fixed;
top: 65%;
left: 0%;
z-index: 1000;
display : none;
width: 100%;
}
.onbk {
position: absolute;
top: 15%;
left: 15%;
display: none;
position: fixed;
z-index: 100;
left: 0px;
top: 0;
width: 100%;
height: 110%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.banner{
width:150px;
height:219px;
min-width:1350px;
overflow:hidden;
display:block;
border:1px solid red;
background-color: red;
}
.skipb {
position: absolute;
top: 6%;
left: 71%;
z-index: 10000;
width: 7%;
cursor: pointer;
}
.dropdown-backdrop {
display:none;
}
.switch {
display: table-cell;
float: none;
}
.cmn-toggle {
position: absolute;
margin-left: -9999px;
visibility: hidden;
}
.cmn-toggle + label {
display: block;
position: relative;
cursor: pointer;
outline: none;
user-select: none;
}
input.cmn-toggle-round + label {
padding: 2px;
width: 52px;
height: 40px;
background-color: #dddddd;
border-radius: 60px;
}
input.cmn-toggle-round + label:before,
input.cmn-toggle-round + label:after {
display: block;
position: absolute;
top: 1px;
left: 1px;
bottom: 1px;
content: "";
}
input.cmn-toggle-round + label:before {
right: 1px;
background-color: #f1f1f1;
border-radius: 60px;
transition: background 0.4s;
}
input.cmn-toggle-round + label:after {
width: 40px;
background-color: #fff;
border-radius: 100%;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
transition: margin 0.4s;
}
input.cmn-toggle-round:checked + label:before {
background-color: #8ce196;
}
input.cmn-toggle-round:checked + label:after {
margin-left: 16px;
}<link href="https://app.btweeps.com/tweet/data/bootstrap.min.css" rel="stylesheet" >
<div class="innercard" id="1010852919623610368" style="transform: rotateY(180deg);">
<div class="container1 face style="height: 400px;">
<header>
<div class="bio">
<img src="http://app.btweeps.com/tweet/data/1530773813" alt="background" class="bg" width="320">
<div class="desc">
<p> Raksha Bandhan 2018 We Provide Way to Send #Rakhi to your brother with love #rakhi2018</p>
</div>
</div>
<div id="gridWrapper" class="avatarcontainer">
<div class="flipBtnWrapper" data-toggle="tooltip" title="Click There" id="flpfrt"> <input class="flipBtn_checkbox" type="checkbox" checked="" onclick="sendaction(this)" id="2AD1010852919623610368USProAC">
<div class="flipBtn demo1">
<div class="flipBtn_face flipBtn_back demo1"><img src="http://app.btweeps.com/tweet/data/twitter.png" class="avatarback"></div>
<div class="flipBtn_face flipBtn_mid demo1"></div>
<div class="flipBtn_face flipBtn_front demo1"><img src="https://pbs.twimg.com/profile_images/1014764745965035520/4Ii-hX40_normal.jpg" class="avatar"></div>
</div>
</div>
</div>
</header>
<img src="http://app.btweeps.com/tweet/data/Flip.png" data-toggle="tooltip" title="Click Here" class="material-icons rotate" onclick="letsrotate("1010852919623610368","180deg")" style="width: 40px;">
<div class="content">
<div class="data">
<ul>
<li>
<div class="timer count-number" data-to="10" data-speed="1500" id="1010852919623610368UStweetsAC">10</div>
<span>Tweets</span>
</li>
<li>
<div class="timer count-number" data-to="0" data-speed="1500" id="1010852919623610368USfollowersAC">0</div>
<span>Followers</span>
</li>
<li>
<div class="timer count-number" data-to="0" data-speed="1500" id="1010852919623610368USfollowingsAC">0</div>
<span>Following</span>
</li>
</ul>
</div>
<div class="follow"> <div class="icon-twitter"></div> @online_rakhis</div>
</div>
<div class="data">
<ul>
<li>
<div class="timer count-number" data-to="0" data-speed="1500" id="1010852919623610368USctargetAC">0</div>
<span>Targeted</span>
</li>
<li>
<div class="timer count-number" data-to="0" data-speed="1500" id="1010852919623610368UScunfollowAC">0</div>
<span>Unfollowed</span>
</li>
<li>
<div class="timer count-number" data-to="0" data-speed="1500" id="1010852919623610368UScfollowbackAC">0</div>
<span>Followed-Back</span>
</li>
</ul>
</div>
</div>
<!--===================================================-->
<!--Control Widget-->
<!--========================demo-psi-=======================-->
<div class="container1 back" style="height: 400px;">
<header>
<div class="bio">
<img src="http://app.btweeps.com/tweet/data/1500x500" alt="background" class="bg" width="320">
<div class="desc">
<p> Remain Actions: 0</p>
</div>
</div>
<div id="gridWrapper" class="avatarcontainer">
<div class="flipBtnWrapper" data-toggle="tooltip" title="Click There" id="flpbk"> <input id="2AD1010852919623610368USmainAC" class="flipBtn_checkbox" type="checkbox" onclick="sendaction(this)" disabled="">
<div class="flipBtn demo1">
<div class="flipBtn_face flipBtn_back demo1"><img src="http://app.btweeps.com/tweet/data/MANUAL.png" class="avatarback"></div>
<div class="flipBtn_face flipBtn_mid demo1"></div>
<div class="flipBtn_face flipBtn_front demo1"><img src="http://app.btweeps.com/tweet/data/AUTOMATED.png" class="avatar"></div>
</div>
</div>
</div>
</header>
<img src="http://app.btweeps.com//tweet/data/Flip.png" data-toggle="tooltip" title="Click Here" class="material-icons rotate" onclick="letsrotate("1010852919623610368","0deg")" style="width: 40px;">
<div class="content">
<div class="data">
<ul>
<li>
<div><div class="switch tg" data-toggle="tooltip" title="Click There" style="position: relative;top: 0px;left: 16px;">
<input id="2AD1010852919623610368USUAC" class="cmn-toggle cmn-toggle-round" type="checkbox" onclick="sendaction(this)" disabled="">
<label for="2AD1010852919623610368USUAC" style="cursor: not-allowed" ;="" id=" 2AD1010852919623610368USUACL"></label>
</div></div>
<span>Unfollow</span>
</li>
<li>
<div> <div class="switch tg" data-toggle="tooltip" title="Click There" style="position: relative;top: 0px;left: 16px;">
<input id="2AD1010852919623610368USFAC" class="cmn-toggle cmn-toggle-round" type="checkbox" onclick="sendaction(this)" disabled="">
<label for="2AD1010852919623610368USFAC" style="cursor: not-allowed" ;="" id=" 2AD1010852919623610368USFACL"></label>
</div></div>
<span>Follow Back</span>
</li>
<li>
<div><div class="switch tg" style="position: relative;top: 0px;left: 16px;">
<input id="2AD1010852919623610368USTAC" class="cmn-toggle cmn-toggle-round" type="checkbox" onclick="sendaction(this)" checked="" disabled="" ;="">
<label for="2AD1010852919623610368USTAC" style="cursor: not-allowed" ;="" id="2AD1010852919623610368USTACL"></label>
</div></div>
<span>Target</span>
</li>
</ul>
</div>
<div class="follow" style="position: relative;left: -23px;"> <div class="icon-twitter"></div> <label class="targetlabel" data-toggle="tooltip" title="Double-click and Enter your Targeted Username here (without @ Sign)." id="2AD1010852919623610368USTTAC" ondblclick="convert(this) " onchange="save(this,this.id)" onfocusout="reconvert(this)"><p>Btweeps</p></label>
</div>
<div id="2AD1010852919623610368USTAAAC" data-toggle="tooltip" title="Click There" class="wrapper-dropdown-3" tabindex="1" onclick="happy(this)" onblur="unhappy(this.id)" style="top: -35px;left: 90px;">
<span> </span>
<ul class="dropdown">
<li><a href="#" onclick="sendaction(this);" id="2AD1010852919623610368USTAIAC">Followers</a></li>
<li><a href="#" onclick="sendaction(this);" id="2AD1010852919623610368USTAOAC">Following</a></li>
</ul>
</div>
</div>
<div class="mainlock" style="position: relative;top: -25px;left: 130px; z-index: -1; "><img src="http://app.btweeps.com//tweet/data/Locked.png" style="width: 65px;"></div>
</div>
<!--===================================================-->
</div>
这是我的应用的控制卡。它可以在chrome和Firefox上正常运行，但在苹果的safari浏览器上，背景卡（通过单击滚轮按钮）的所有前面板元素都在背景上重叠。我尝试了很多事情，但无法获得任何解决方案。任何帮助将不胜感激。