I'm making a simple javascript game. At the moment, I'm facing a problem in the form of cross-browser compatibility with Safari. I have cards that flip on click through transform: rotateY() by 180deg, they also have a transition. And as far as I understand the problem is with him. Because if you remove it and leave the same flip logic, then this bug does not exist. If possible, please tell me how to solve it. You can go directly to the site itself -> https://oltensia.ru/
bug
Here is the whole code:
HTML:
<div class="game__square relative">
<div class="game__square-side game__square-back">
<div class="w-h-full relative">
<div class="square-back square-side stage-1"></div>
<div class="square-back square-side stage-2"></div>
<div class="square-back square-side stage-3"></div>
<div class="square-back square-side stage-4"></div>
<div class="square-back square-side stage-5"></div>
<div class="square-back square-side stage-6"></div>
</div>
<div class="w-h-full absolute flex-centered left-top-0">
<span class="question-mark">?</span>
</div>
</div>
<div class="game__square-side game__square-front">
<div class="w-h-full relative">
<div class="square-front square-side stage-1"></div>
<div class="square-front square-side stage-2"></div>
<div class="square-front square-side stage-3"></div>
<div class="square-front square-side stage-4"></div>
<div class="square-front square-side stage-5"></div>
<div class="square-front square-side stage-6"></div>
</div>
<div class="w-h-full absolute flex-centered left-top-0">
<img class="game__square-img" src="./storage/img/main/game-field/square-front/chest.png">
</div>
</div>
</div>
Sass
.game__square
border: none
outline: none
background: none
cursor: pointer
&-side
#include w-h-full()
#include left-top-0()
position: absolute
backface-visibility: hidden
-webkit-transition: all 200ms linear
-moz-transition: all 200ms linear
-o-transition: all 200ms linear
.square-side
position: absolute
#include left-top-0()
#include w-h-full()
&-back
transform: rotateY(0deg)
-ms-transform: rotateY(0deg)
-webkit-transform: rotateY(0deg)
-moz-transform: rotateY(0deg)
-o-transform: rotateY(0deg)
.question-mark
font-family: $ff-question-mark
&-front
transform: rotateY(180deg)
-ms-transform: rotateY(180deg)
-webkit-transform: rotateY(180deg)
-moz-transform: rotateY(180deg)
-o-transform: rotateY(180deg)
&.checked
.game__square-back
transform: rotateY(-180deg)
-ms-transform: rotateY(-180deg)
-webkit-transform: rotateY(-180deg)
-moz-transform: rotateY(-180deg)
-o-transform: rotateY(-180deg)
.game__square-front
transform: rotateY(-180deg)
-ms-transform: rotateY(0deg)
-webkit-transform: rotateY(0deg)
-moz-transform: rotateY(0deg)
-o-transform: rotateY(0deg)
Please, help me if it posible. I'll be very grateful
I tried to fix it by adding cross-browser ones, but I don't know which ones to add
Related
When I rotate an image using rotate(90) the top of the image is cut off, even if the container has overflow: auto.
#container {
width: 100%;
overflow: auto;
}
.rotate90 {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
<div id="container">
<img src="https://dummyimage.com/2048x1024/000/fff" id="image" class="rotate90" alt="">
</div>
Example: https://jsfiddle.net/dh0o6vz3/3/
Is there a way to alter the container's css so that it overflows above the image as well as below?
You need to use overflow:visible instead and you may also change the transform-origin depending on how you want to show the image
#container {
width: 100%;
overflow: visible;
border: 1px solid;
}
.rotate90 {
transform: rotate(90deg);
transform-origin: bottom;
}
<div id="container">
<img src="https://dummyimage.com/248x124/000/fff" id="image" class="rotate90" alt="">
</div>
So I ended up having to force a translation, which I guess makes sense.
.rotate90 {
-webkit-transform: rotate(90deg) translate(25%);
-moz-transform: rotate(90deg) translate(25%);
-o-transform: rotate(90deg) translate(25%);
-ms-transform: rotate(90deg) translate(25%);
transform: rotate(90deg) translate(25%);
}
This doesn't work in all cases, as the width of the image determines what % translate I need.
But it works well enough for the use cases I have,
I've created a CSS3 tile flip effect with the following code:
HTML:
<div class="flip-container">
<div class="flipper">
<div class="front img1">
</div>
<div class="back" id="back1"></div> // img1 and back1 are specified in the CSS with the background-image property.
</div>
</div>
CSS:
.flip-toggle.flip .flipper {
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.back {
-ms-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
border: 0;
}
However, as can be seen here, the effect doens't work properly. On Chrome, Firefox and Safari, it properly displays the back image of each tile, but Internet Explorer simply mirrors the front image.
How can I solve this? Any help would be much appreciated!
Have a read at http://davidwalsh.name/css-flip#ieflip
In the end, to support IE10+, you need to apply the rotation to the two sides and not their container.. (because preserve-3d is not supported)
I have a problem with a website. I use CSS3 and Transform to rotate the DIV. No problems on all browsers except Iphone and only on the FAQ page, the DIV will not turn!
http://www.bagolf.com/faq
Do you know why I searched for hours, and I do not understand.
<div class="block1_faq_container">
<div class="block1_faq_card">
<div class="front blue">
<h4 class="title">How many clubs may I put in a Bagolf bag?</h4>
</div>
<div class="back face center blue">
<span class="title-148-1-2">There are 15 dividers for 14 clubs and 1 umbrella. Each club has its own divider!</span>
</div>
</div>
</div>
And CSS code :
.block1_faq_container{margin: 10px 0 0; width: 306px; height: 148px; text- align:center;float:left;}
.block1_faq_card,
.block1_faq_card > div{width: inherit;height: inherit;transition: transform 1s; -webkit-transition: all 1s ease-in-out;}
.block1_faq_card > div{line-height: 148px;position: absolute;backface-visibility: hidden; -webkit-backface-visibility: hidden;}
.block1_faq_container:hover .front{transform: perspective(600px) rotateY(180deg); -webkit-transform: perspective(600px) rotateY(180deg);}
.block1_faq_container:hover .back{transform: perspective(600px) rotateY(360deg); -webkit-transform: perspective(600px) rotateY(360deg);}
.title {font-size: 1.9em !important;font-weight: lighter;color:#fff; vertical-align:middle;line-height:1.2em;display:inline-block; padding:10px; }
.title-148-1-2 {font-size: 1.4em !important;font-weight: normal;color:#fff; vertical-align:middle;line-height:1.2em;display:inline-block;padding:10px;}
.front.blue{background-color:#00a0e9;transform: perspective(600px) rotateY(0deg); -webkit-transform: perspective(600px) rotateY(0deg);line-height:148px;}
Thank you very much :)
I am attempting to create a sliding div that comes in from the right when you hover over the div. It works in Chrome, but not in firefox... what am I missing? It works correctly in Chrome and Safari...
http://jsfiddle.net/mwilday/MVw57/1/
css:
.gettingstarted {
-ms-transform: translate(200px, 0px);
/* IE 9 */
-webkit-transform: translate(200px, 0px);
/* Safari and Chrome */
-moz-transform: translate(200px, 0px);
transform: translate(200px, 0px);
background: rgba(0, 0, 0, .8);
}
.gettingstarted:hover {
-webkit-transition: .8s;
-moz-transition: .8s;
transition: .8s;
transition-timing-function: ease-in-out;
-ms-transform: translate(0px, 0px);
/* IE 9 */
-webkit-transform: translate(0px, 0px);
/* Safari and Chrome */
-moz-transform: translate(0px, 0px);
transform: translate(0px, 0px);
HTML:
<div id="frontpagetile">
<div class="gettingstarted">
<p style="text-align: left;">Getting Started</p>
<ul>
<li style="text-align: left;">Link
</li>
<li style="text-align: left;"><span style="line-height: 1.231;">Link</span>
</li>
<li style="text-align: left;"><span style="line-height: 1.231;">Link</span>
</li>
</ul>
</div>
</div>
Your fiddle uses the :hover selector on the .gettingstarted element, which is not visible. Change the selector .gettingstarted:hover {} to #frontpagetile:hover .gettingstarted {} so that the hover change takes place when the parent element is hovered.
I've been working with transforms and transitions to create animated UI components without Javascript and really enjoying the results, but I've come across a disturbing issue that appears to be unique to webkit browsers.
On an element which I have rotated, an anchor that spans 100% of the width of the element is only accessible on the right 50% of the element.
This problem does not exist using -moz-transform in Firefox, but is 100% reproducible in both Chrome and Safari using -webkit-transform.
Here is the code:
<!doctype html>
<html>
<head>
<title>webkit spincard test bed</title>
<style type="text/css">
#card-lists{
width:100%;
float:left;
}
#card-lists ul{
list-style:none;
}
#card-lists ul li{
width:230px;
height:236px;
}
.non-mobile #card-lists ul.card-list li .flipcard-container:hover .flipcard,
.non-mobile #card-lists ul.card-list li .flipcard-container.hover .flipcard{
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-moz-transform-style: preserve-3d;
-moz-transition: all 0s linear 0s;
-webkit-transform-style: preserve-3d;
-webkit-transition: all 0s linear 0s;
}
.non-mobile #card-lists ul.card-list li .flipcard{
-moz-transform: rotateY(0deg);
-moz-transition: all 0s linear 0s;
-webkit-transform: rotateY(0deg);
-webkit-transition: all 0s linear 0s;
width:230px;
height:236px;
}
.face {
position: absolute;
width: 100%;
height: 100%;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.face.back {
background-color: #125672;
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
}
.face.front {
background-color:#000;
}
</style>
</head>
<body class="non-mobile">
<div id="card-lists">
<ul class="card-list" id="cardes-list-total">
<li>
<div class="flipcard-container">
<div class="flipcard">
<div class="front face">
<a href="#">
<div style="width:100%; height:100%;">
</div>
</a>
</div>
<div class="back face">
<a href="#">
<div style="width:100%; height:100%;">
</div>
</a>
</div>
</div>
</div>
</li>
</ul>
</div>
</body>
</html>
Any help anyone could offer would be greatly appreciated as I've already spent an inordinate amount of time on the issue.
After combing through the webkit Bugzilla, I found someone who had the same issue and found a workaround.
.face.back {
background-color: #125672;
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
}
Becomes:
.face.back {
background-color: #125672;
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg) translateZ(1px);
}
The addition of the translateZ to the transform makes the left side of the element clickable.
Here is a link to the bug: https://bugs.webkit.org/show_bug.cgi?id=54371
I used this code below
<style>
.outer div {
float: left;
-webkit-perspective: 200px;
-webkit-transform-style: preserve-3d;
}
.outer a {
-webkit-transition: all 1.0s ease-in-out;
background:#0F6;
width:100px;
height:100px;
display:block;
-webkit-transform: rotateY(45deg);
}
.outer div:hover a {
-webkit-transform: none;
}
</style>
<div class="outer">
<div>
</div>
</div>
This solution works for me in chrome. http://jsfiddle.net/jaxweb/7qtLD/7/