I have a web page that emulates a wizard. After the user leaves the second step to go to the third step, I'm "flipping" the panel like a card. You can see it in action in this Bootply. The code looks like this:
<div class="container-fluid" style="background-color:#eee;">
<div class="container">
<div class="flip-container" style="width:200px;">
<div class="flipper">
<div class="front">
<div class="step-2-default" id="step2" style="overflow-x:hidden; padding:0.0rem 1.0rem;">
<label>Step 2</label>
<p>These are the details of the second step</p>
<button id="nextButton2">next</button>
</div>
<div class="step-1-default" id="step1">
<label>Step 1</label>
<p>These are the details of the first step</p>
<button id="nextButton1">next</button>
</div>
</div>
<div class="back">
<div id="step3">
<label>Step 3</label>
<p>Thank you for using this wizard</p>
</div>
</div>
</div>
</div>
</div>
</div>
If you load the Bootply, you'll notice that the step is visible from steps 1 and 2. From my understanding, the issue is the height:auto property. I'm using this because the size of the content for each of the steps in my wizard is dynamic.
It works fine in Chrome. But, I can't figure out how to make it work in iOS / Safari. Any help is appreciated.
You're missing a webkit-specific backface-visibility:
.front, .back {
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
http://www.bootply.com/RiX9HF5t21
That works for me in Safari (tested), just change the background-color:transparent; to background-color: #fff; for classes .step-1-default, .step-2-default and add:
.flip-container.flip .front {
display: none;
}
To prevent the other side from being visible in Safari & iOS, set the background color on the front and back classes:
.front, .back {
width: 100%;
height: auto;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
background-color: #FFF;
}
Related
I am trying to make a flip card on my site but everytime I make the elements they default to a height of 2 or 1 px. I believe it has something to do with making the position of a couple of the elements absolute, but that is the only way I've seen to do this without messing up the layout of my page. I'm using Bootstrap CSS and some custom CSS and JS Here is my code:
HTML:
<div class="scene col-md-4 d-inline-block h-50">
<div class="card">
<div class="face front">
<img src="images/pawprints_edit.png" width="300" height="180" alt="sign up for al-van newsletter" id="news-img" class="d-inline-block col-md-12 img-fluid h-50" />
</div>
<div class="face back">
<form action="form-to-email.php" method="post" name="mail-form" class="mail-form">
<label for="name">Name:</label><br/>
<input type="text" name="name" placeholder="John Doe" required width="25"><br/>
<label for="email">Email Address:</label><br/>
<input type="text" name="email" placeholder="yourname#domain.com" required width="50">
<label for="message">Please type your message:</label><br/>
<textarea name="message" id="message" cols="30" rows="4">Please sign me up for the Paw Prints Newsletter.</textarea><br/>
<input type="button" value="Submit">
</form>
</div>
</div>
</div>
The CSS:
/* form animation */
.scene {
width: 33.3333333%;
height: 300px;
perspective: 1000px;
}
.card {
width: 100%;
height: 100%;
position: relative;
transition: transform 1s;
transform-style: preserve-3d;
}
.face {
position: absolute;
height: 100%;
width: 100%;
backface-visibility: hidden;
}
.front {
background: #98b98a;
}
.back {
background: #4c87a9;
transform: rotateY(180deg);
}
.card.is-flipped {
transform: rotateY(180deg);
}
/* End animation */
Any help would be appreciated. Perhaps there is a workaround? It displays correctly and the animation works in a way if I remove "position: absolute" but that section is introduced into the flow of the page and the layout doesn't work the way I want it to.
I set a hover on your card and it appears to work.
.card:hover {
transform: rotateY(180deg);
}
The solution ended up being to apply !important to the height property and it was recognized before whatever bootstrap property was forcing the absolute elements to be only 2px in height.
So I'm currently implementing some flip animation on a few elements within my project.
I have achieved the animation via CSS and ontouchstart attribute with hover. However, the backface of the card or element is never shown. But when I created the following JSFiddle: https://jsfiddle.net/pueg0uxm/
This is the effect I'm trying complete but this code isn't working within my project for some reason.
The only other classes I have that might be effecting it is the following;
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="child" style="animation-delay: 6.5s;">
<div class="front" ng-style={'backgroundimage':'url(/assets/02_BRANDING.jpg)'}">
<h1 class="feature-text">RETAIL<br/>DESIGN</h1>
</div>
<div class="back">
<div>
<h1 >Portland...</h1>
</div>
</div>
</div>
</div>
</div>
.child {
-ms-flex-positive: 1;
flex-grow: 1;
height: 50%;
width: 25%;
max-width: calc(100% * (1/4));
margin: 0;
position: relative;
-ms-flex-flow: nowrap row;
flex-flow: nowrap row;
}
Here is a gif of what is happening compared to the JSFiddle with the same code;
As you can see the backface is still visible and not the code which is within the back class and div.
UPDATE:
I rebuilt the page with all relatively-positioned elements and the thing is still stuck when I navigate via pageid. I think it's definitely a Safari-specific overlap conflict and it is super annoying. Any ideas out there?
I'm working on a microsite that uses pageid's to navigate through full-page div's, arranged vertically with the overflow hidden. It works just fine on every browser, including mobile, except desktop versions of Safari.
The div's scroll when the page is refreshed to the specific pageid, and will scroll if the text is highlighted and dragged, but if you start at page 01 and navigate to page 02 (like you're supposed to), the content will not scroll.
It seems like it might be an overflow conflict, but I tried to do this with the page div's scrolling horizontally to separate the x- and y-axis issue and I got nothing. It's acting more like there's a transparent layer in between me and the scroll...
Check out the microsite here: http://www.kevinjbeaty.com/trailtool-stackoverflow
Note that it works just fine everywhere else.
This is the basic html:
<div class = "viewbox">
<div id= "page01" class="page">
<div class="content">
**these are photos that do not scroll**
</div>
</div>
<div id= "page02" class="page">
<div class="content">
**these are photos that do not scroll**
</div>
<div class="contentscroll">
**this is text that should scroll**
</div>
<div id= "page03" class="page">
<div class="content">
**these are photos that do not scroll**
</div>
</div>
<div id= "page04" class="page">
<div class="content">
**these are photos that do not scroll**
</div>
<div class="contentscroll">
**this is text that should scroll**
</div>
</div>
and the basic css:
.viewbox {
position: relative;
height: 100%;
width: 100%;
display: block;
overflow: hidden;
background-color: black;
z-index:0;
}
.page {
position: relative;
height: 100%;
width: 100%;
display: block;
z-index:1;
overflow: scroll;
background-color: white;
z-index:10;
}
.content {
position: absolute;
padding: 2%;
background-size: contain;
background-repeat: no-repeat;
display: block;
}
.contentscroll {
position: absolute;
padding: 2%;
overflow-y: scroll;
overflow-x: hidden;
display: block;
z-index: 200;
}
Got it! Wow.
I changed the body "overflow" to "hidden" and got rid of the ".viewbox" wrapper altogether and viola! Stupid simple...
I can't seem to figure this out.
I want to have a system whereby an image will change to another image upon hover over.
In my html I have:
<div class="linkyimage">
<img src="image/red.png" alt="red" />
<p class="hovvery"<img src="image/black.png"></p>
</div>
And then in my css:
.linkyimage{
position: relative;
height: 250px;
width:250px:
}
.hovvery{
position: absolute;
height: 250px;
width:250px:
visibility: hidden;
opacity: 0;
}
.linkyimage:hover .hovvery {
visibility: visible;
opacity:1;
}
Yet nothing seems to happen for me. Where am I going wrong?
edit:
Still can't seem to get any effect.....
.linkyimage{
position: relative;
height: 250px;
width:250px;
}
.hovvery{
position: absolute;
height: 250px;
width:250px;
visibility: hidden;
opacity: 0;
}
.linkyimage:hover .hovvery{
visibility: visible;
opacity:1;
}
and html:
<div id="content">
<div class="linkyimage">
<img src="image/red.png" alt="red" />
<p class="hovvery"<img src="image/black.png" /></p>
</div>
<img src="image/yellow.png">
<img src="image/lblue.png">
<img src="image/green.png">
<img src="image/brown.png">
<div class"linkyimage">
<img src="image/dblue.png" alt"blue" />
<p class="hovvery"<img src="image/black.png" /></p>
</div>
</div>
I'm going for sort of a gallery of images, which on mouse over change to the black image- in the futuer I will make it so a description of the image appears over it but for now trying to get the basics going!
Working FIDDLE Demo
You didn't close p in this line:
<p class="hovvery"<img src="image/black.png"></p>
Correct code:
<div class="linkyimage">
<img src="image/red.png" alt="red" />
<p class="hovvery"><img src="image/black.png" /></p>
</div>
Also you have syntax error in your CSS here:
width:250px: /* it must be semicolon ; at the end */
Change it to this:
width: 250px;
I was trying to implement the "translateZ" transform function in IE10 preview and came across an issue.
So it only works properly if the "direct" parent of the transformed node has the "-ms-perspective" property and does not work if the parent's parent has got the "-ms-perspective" property set up.
Can anyone suggest if this is a bug and if there is a workaround.
For example it does not work if in the following code I apply "-ms-perspective" to "div1" and try rotateZ on div3 .
<div class="div1">
<div class="div2">
Parent
<div class="div3">
Child
</div>
</div>
</div>
It appears to work just fine for me in Internet Explorer 10.0.8400.0:
<div class="div1">
<div class="div2">
Parent
<div class="div3">
Child Rotated
</div>
</div>
</div>
Along with the following CSS:
.div1 {
margin: 25px 100px;
background: #f1f1f1;
-ms-perspective: 500px;
}
.div3 {
width: 100px;
height: 100px;
background: orange;
-ms-transform: rotateZ(30deg);
}
Produces the following effect:
Fiddle: http://jsfiddle.net/jonathansampson/NKZw6/