I've run into a rather strange problem. I have a div that is rotatable via CSS3. The div has a front div child and back div child, with the back div having -webkit-transform: rotateY( 180deg ) set.
The problem that once the parent element is rotated to display the back side of the div, it will only detect clicks of child elements on exactly one side of the div, specifically the second half of the div or right side. The front side div detects clicks on the entire face of element. Also, the z-indexes are fine. I assume that the issue may be due to the rotation and the browser displaying one half of the side "closer"?
The code that this is breaking is extremely complex, so I created a test file to demonstrate the problem below. I'm using a jQuery plugin I wrote for the 3D transformations, which can be found here https://github.com/pwhisenhunt/jquery.transform/blob/master/jquery.transform.js.
Edit: After experimentation, the clicking of the button element is only registering from 100-200px and not from 0-100px. In other words, it is in fact only registering on the second half of the div.
Any help is very much appreciated!
<html>
<head>
<style>
.element{
width:200;
height:200;
-webkit-perspective: 800;
-webkit-transform-style: preserve-3d;
}
.element figure {
display: block;
height: 100%;
width: 100%;
position: absolute;
-webkit-backface-visibility: hidden;
border:1px solid yellow;
}
.element .front {
-webkit-border-radius:8px;
padding: 0px;
margin: 0px;
background-color:yellow;
z-index: 9870;
}
.element .back {
-webkit-border-radius:8px;
padding: 0px;
margin: 0;
-webkit-transform: rotateY( 180deg );
z-index: 0;
border: 1px solid red;
background-color:green;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="https://raw.github.com/pwhisenhunt/jquery.transform/master/jquery.transform.js"></script>
<script>
$(function(){
var temp = false;
$(".element").click(function(){
if(temp == false){
$(this).transform("setAnimationDuration", 1).transform("rotateY", 180);
$(this).unbind("mouseenter mouseleave");
button = $(document.createElement('div')).attr("id", "button").css({ width: 200, height: 50, backgroundColor:"blue" });
button.click(function(){
console.log("Clicking");
});
temp = true;
$(this).append(button);
}
})
})
</script>
</head>
<body>
<div class="element">
<figure class="front"></front>
<figure class="back"></front>
</div>
</body>
</html>
A JSFiddle Example of the Problem - Can be found HERE!
I know this reply is a bit too late for most of us here, but I ran into this problem earlier today, and none of the replies helped me solve it.
Solution by #kristiankeane made the other half non-clickable. I was using a container for the wrapper as well. Turns out, it's an odd bug in webkit, and I was able to fix it and make 100% of the element clickable by changing transform: rotateY(180deg) to transform: rotateY(-180deg)
It's really odd, and I don't know how it worked, but it did. I hope this helps someone!
I had this exact same issue, was able to fix it by slightly changing the parent rotation when flipped - I changed
`.flip-holder.flipped {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
}`
to
`$.flip-holder.flipped {
-webkit-transform: rotateY(180.5deg);
-moz-transform: rotateY(180.5deg);
transform: rotateY(180.5deg);
}`
and the entire backface (plus overflowed elements positioned absolutely) were now clickable, and the browser did not render the extra 0.5deg of rotation so text and images are clear.
Translate both front and back just a little bit and they won't overlap.
Example:
.element .front {
-webkit-transform: translateZ(1px);
}
.element .back {
-webkit-transform: rotateY(180deg) translateZ(1px);
}
it seems that you are missing a container (in much the same way I was missing it).
see the official documentation
it's not the outer element being flipped, but a wrapper inside it. that in turn causes one of two divs to be displayed (and the transition to occur)
If your flip card structure is like this:
<div class="flipcard">
<div class="flipcard-front">
</div>
<div class="flipcard-back">
</div>
</div>
then add this to your CSS:
.flipcard:hover {
pointer-events: none;
}
.flipcard-back:hover {
pointer-events: auto;
}
could It be (and I'm just speculating) that you should use a live or delegate event bind instead of the regular. I'm speculating the click event maybe 'remembers' some how the original div position without the rotating.
After all tricks as rotate to back and rotate to 180.5 and other...
problem fixed only the following way:
When the rotation ends - create new element, clone html from rotated element, and insert new element instead of old
Related
I am currently working on making a flipping animation on some divs.
However, I have found that it works incorrectly and differently in every browser that I have tried. Only Edge works the way that I want.
I want clicking the "flip" text to flip over in order to show the .flipping-view-back div, and hide the .flipping-view-front div. Additionally, the toolbar with position:fixed on the back div should be fixed at the top of the page even when scrolling.
In reality, this is only working in some browsers.
On Edge: This is working exactly how I want it to. Video
On Chrome: The front div flips over, but there is no back div visible behind it. The back div only pops in once the rotation transition has fully completed. Strangely, scrolling at any time during the flip will also trigger the back div to pop in. Also, scrolling down moves the fixed div out of sight. Video
On iOS Safari: This flips correctly, but scrolling down moves the fixed div out of sight. Video
In all these videos, I clicked on the flip text and waited for the animation to finish. Then I scrolled down.
How can I make the flip animation correct and keep the fixed div at the top in all browsers?
var currView = 0;
const rotatingViewElem = document.querySelector(".main");
const VIEW_FEED = 0;
const VIEW_FLIPPING_SEND = 1;
var viewFeedElem = document.querySelector(".view-positioner.feed");
var viewCreateElem = document.querySelector(".view-positioner.create");
var viewSelectRecipientsElem = document.querySelector(".view-positioner.select-recipients");
var viewFlippingSendElem = document.querySelector(".view-positioner.flipping-send");
var viewsList = [viewFlippingSendElem];
function flipView(isGoForward) {
var flippingElem = viewsList[currView];
var globalRotate;
if (isGoForward) {
globalRotate = "rotateY(180deg)";//flip around
} else {
globalRotate = "rotateY(0deg)";
}
flippingElem.style.transform = globalRotate;
}
document.querySelector(".create-send-button").addEventListener("click", function (e) { flipView(true) })
body, html{
width:100%;
height:100%;
margin:0px;
overflow:hidden;
}
.main{
perspective: 2000px;
height:100%;
}
.flipping-view-wrapper{
transform: rotateY(0);
transform-style: preserve-3d;
transition: transform 5.5s;
}
body{
height: 100%;
}
.view{
transform-style: preserve-3d;
position: relative;
padding-top:1px;
overflow-y:auto;
height: calc(100% - 1px);
width:100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.view-positioner{
position: absolute;
left:0px;
top:0px;
width:100%;
height:100%;
}
.flipping-view-front{
background-color: pink;
transform: rotateY(0deg);
}
.flipping-view-back{
background-color: green;
transform:rotateY(180deg);
}
.create-send-button{
cursor: pointer;
}
/* begin top toolbar */
.top-toolbar{
position:fixed;
top:0px;
left:0px;
width:100%;
height:55px;
background:#FFFB00;
}
<!DOCTYPE html>
<html>
<body class="lightblue">
<div class="main">
<div class="view-positioner flipping-send flipping-view-wrapper lightblue ">
<div class="view-positioner view create flipping-view-front">
<div class="create-inputs center">
<div class="create-send-button" style="font-size: 50px;">
flip to the backside this is long so you can see
</div>
</div>
</div>
<div class="view-positioner view select-recipients lightblue flipping-view-back">
<div class="top-toolbar">
fixed
</div>
<div style="width:10px">Long text a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a
a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a</div>
</div>
</div>
</div>
</body>
</html>
Could have something to do with the browsers itself, maybe look into -webkit. There are webkits for different browser so you might need to use multiple webkits for different browsers
What is WebKit and how is it related to CSS?
That post might give you some more info
Interesting bug in Chrome. If a scrollable div is off screen when the page initially loads, then that scrollable div is not scrollable by way of mouse wheel or touch pad gestures until it is given focus (by double clicking somewhere within its element, or selecting text inside of it).
Update
This bug is documented here https://code.google.com/p/chromium/issues/detail?id=417345 It remains unfixed as of May 2015. The thread provides some interesting possible solutions with javascript, but I would like to see if anyone has any alternate suggestions for a fix, possibly not involving JS
The Bug
When you click on the button to "Show Side Container", the side container will slide into view, and the main container will slide out of view. If you immediately try to scroll using the mouse wheel or two finger gesture on a laptop track pad, nothing will happen. You can use page up and page down on the keyboard however, these do work. You can of course also use the actual scroll by by clicking on it with a mouse.
In firefox and IE, you can use the mouse wheel to scroll on this element
Example
http://codepen.io/msorrentino/full/aOYaOM/
HTML
<div class="wrapper">
<div class="page-container">
<button class="show-side">Show Side Container</button>
</div>
<div class="side-container">
<button class="close-side">Close Side Container</button>
<div class="large-content"></div>
</div>
</div>
CSS
html,
body,
*,
*:after,
*:before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
height: 100%;
}
.wrapper {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
}
.page-container, .side-container {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 5px solid;
overflow-y: auto;
overflow-x: hidden;
-webkit-transition: -webkit-transform 0.2s cubic-bezier(0.68, 0, 0, 1);
transition: -webkit-transform 0.2s cubic-bezier(0.68, 0, 0, 1), transform 0.2s cubic-bezier(0.68, 0, 0, 1);
}
.page-container {
-webkit-transform: translate(0,0);
transform: translate(0,0);
}
.page-container-hidden {
-webkit-transform: translate(-100%,0);
transform: translate(-100%,0);
}
.side-container {
-webkit-transform: translate(100%,0);
transform: translate(100%,0);
}
.side-container-visible {
-webkit-transform: translate(0,0);
transform: translate(0,0);
}
.large-content {
height: 2000px;
}
JS
$('.show-side').click(function(){
$('.page-container').addClass('page-container-hidden');
$('.side-container').addClass('side-container-visible');
});
$('.close-side').click(function(){
$('.page-container').removeClass('page-container-hidden');
$('.side-container').removeClass('side-container-visible');
});
It gets more interesting
If you make the original "page-container" element have enough content that to force it to have overflow, then the "side-container" element no longer displays the aforementioned bug!
http://codepen.io/msorrentino/full/WvzgQZ/
Any thoughts on what is happening here are welcome, and any possible fixes would be very welcome.
Came across this question when I encountered a very similar problem with an off-screen menu that moves on-screen when toggled.
Here's the relevant HTML and CSS, simplified:
<div class="menu">
<!-- long list of menu items here -->
</div>
.menu {
position: fixed;
top: 0;
bottom: 0;
left: 0;
transform: translateX(-100%);
transition: transform ease 125ms;
}
.menu--active {
transform: translateX(0);
}
.menu--active is toggled with a button.
Though you're looking for a non-JS solution, I thought I'd post the cleanest workaround I've found in case people end up here with the same problem.
The workaround is to simply force a focus state on the div after the transition has completed. To do this, you first have to give the div a tabindex so that it can be focused.
<div class="menu" tabindex="-1">
<!-- long list of menu items here -->
</div>
(A value of -1 should keep the div out of the normal tab order.)
Then, using a bit of delayed jQuery, focus on the div. This should be invoked along with whatever logic you use to "activate" your div.
setTimeout( function() {
$('.menu').focus();
},150);
The time here is 150 milliseconds, which is just after the transition should have completed. A value equal to that of the transition duration would probably work too, but I set it longer just to be safe.
A more complete example might be:
$('.menuButton').on('click', function() {
$('.menu').addClass('menu--active');
setTimeout( function() {
$('.menu').focus();
},150);
});
Finally, you probably won't want the focus outline on the focused div, so you might choose to remove it with an outline: none in the style rule for your div. In my project, but not in the original example in the question, this actually broke focus on the div, and it went back to being un-scrollable. So I did this instead:
.menu:focus {
outline-color: transparent;
}
I forked the original example and included this solution here: http://codepen.io/johntobinme/full/MaPMgY
You have overflow-y set to auto, meaning it will create a scroll bar for off screen content. Since .large-content has such a large height, it goes off screen. Simply set overflow-y to none and this will no longer occur. Not a bug, just user error.
I am trying to position a rotated headline next to some text. Statically it works very easy with absolute positioning (left picture). I have, however, difficulties when the page gets resized and the positioning fails (right picture).
Current CSS (can be changed):
.headline {
white-space: nowrap;
position: absolute;
top: 185px;
left: -20px;
transform: rotate(270deg);
}
Current HTML structure (can be changed):
<header>
<h1 class="headline">Über mich</h1>
</header>
<div class="text">
<p class="introduction">....</p>
</div>
How can I position the element so that I always stays 20px next to the paragraph?
Could someone link me to existing patterns how to solve this?
A solution with JS (and jQuery) would an option, I would, however, obviously prefer CSS.
Had the same issue. Managed to solve it like this in pure CSS :
.parent {
position: relative;
}
.child {
position: absolute;
transform: translateX(-100%) rotate(-90deg);
transform-origin: right;
left: 30px; /* change this value to match needs */
top: 30px; /* change this value to match needs */
}
The solution was a combination of Diego's answer and Smamatti's comment:
I had to use transform-origin:bottom and width:0. That was working rather quickly, the big problem I had was positioning the text independently to the length of the text. I've only managed to do this by using javascript.
.header
{
margin: 0;
width: 0;
white-space: nowrap;
position: absolute;
text-align: left;
transform-origin: bottom;
margin-top: 280px;
transform: rotate(270deg);
}
Javascript (to ensure compatibility to variables text length):
function adjustSideHeader() {
//check if the headline is visible
if($('h1.headline').length > 0)
{
var headline = $('h1.headline')[0];
var stringLength = headline.textContent.length;
//add style tag to support media queries
document.querySelector('style').textContent +=
"h1.headline { margin-top: " + (stringLength*23.5) + "px; -webkit-transition: margin-top 2s; transition: margin-top 2s;}"
}
}
// fire it when document is loaded
$(document).ready(setTimeout(adjustSideHeader, 300));
Result:
Have you tried moving
<h1 class="headline">Über mich</h1>
inside
<div class="text">?
and set
.text {
position: relative;
}
so that the position is relative to to "text" div. After that you might want to move the Über mich text to the left by reducing it's left value.
Have you tried use position:relative and the margin property?, I suppose it would be something like this:
.headline {
white-space: nowrap;
position: relative; //changed
margin-top: 185px; //changed
margin-left: -20px; //changed
transform: rotate(270deg);
}
*Note: I think you should move the headline inside the paragraph
I have an answer that may be late but worked wonderfully for me.
Normally your text will have a class or id and it will be position:absolute, and positioning values after it, like so:
.TextClass{
position:absolute;
top:50%;
left:55%;
transform:rotate(-90deg);
etc.
However, when you rotate, the positioning becomes relative (as mentioned above).
I found out that by simply putting the rotated text inside a parent div, you can position the (unrotated, position absolute) parent div as much as you want, and then rotate the text (which will be position:relative) inside the parent div, like so:
.divname{
position:absolute;
top:50vh;
left:50vw;
}
.TextClass{
position:relative;
transform:rotate(-90deg);
}
I'm have a vertical stack of items to which the user can append one by clicking a button, roughly like this.
<ol>
<li><textarea></textarea></li>
<li><textarea></textarea></li>
</ol>
<a data-action="additem">Add another</a>
I'm trying to write a CSS animation so that when the new li is inserted, the "Add another" smoothly slides down to its new resting place. Fixed height on the li tags is not an option, and I'm trying to avoid using the max-height animation hack because it can have weird layout effects.
I figured out that I could animate margin-bottom from something to 0 and have the desired effect, but I can't figure out how in CSS to express that I want the current height of the element to which this rule is applied. Percentages are measured relative to the width of the element, which isn't what I need here, and I can't think of a clever trick using calc or the like to express what I want to the browser.
Suggestions?
EDIT
I'm using a template with a repeat binding to add the items to the list. The JS only pushes another object into an observable array, and the framework handles the actual DOM insertion. The li tag has on it the following CSS to get it to enter smoothly:
animation: append forwards .5s;
And append is defined as:
#keyframes append {
from {
transform: translateX(10%);
opacity: 0;
margin-bottom: _____;
}
to {
transform: none;
opacity: 1;
margin-bottom: 0;
}
}
Not currently...
I've come up against this frustrating issue a number of times, always trying to either animate a non-numeric value, access a specific property of the current element as an animation value, or animate an unspecified value to a specified one. Generally I always have to fall back to either some form of not-quite-perfect max-height animation (like you've already mentioned) or use a mixture of CSS and JavaScript/jQuery.
For your issue there are a few options, but none are exactly what you're after.
css only version (using duplicated markup and another animation)
http://jsfiddle.net/7m8F9/2/
http://jsfiddle.net/7m8F9/3/ <-- improved version using bottom and position:relative
http://jsfiddle.net/7m8F9/5/ <-- even better version, going back to translateY
One trick often used with CSS-only hacks, is to duplicate markup — in this instance, the link iteself — and place it within parent wrappers that will be turned on or off by different means. The downsides to this method are that you get a rather ugly markup, and in this particular instance a bullet-number that appears jarringly (because of having to move the opacity animation from the li to the textarea).
The benefits of this method however are that by moving the link inside the li you can use -100% on the y-axis with a translate, or another offset method. Oddly though I can't work out what translateY(-100%) is calculating based upon... it doesn't seem to be the parent height, perhaps it is the height of itself. For this reason I've updated the fiddle to use bottom and relative positioning instead, although in Firefox (on mac) this glitches briefly.
It does seem to be that translateY is calculating percentage based on it's own height, so in order to get around this problem I've had to make use of position absolute and force the the link layer to assume the same dimensions as the li... annoying, as it involves z-indexing the textarea above the link, and an internal span to offset the link text, but at least it does work.
The following code works in the latest Firefox, and would work in other modern browsers if all the different browser-prefixes were correctly used to define the animation keyframes, I don't have time to set them all up right now however.
markup:
<ol class="list">
<li><textarea></textarea><a class="add" href="#"><span>Add another</span></a></li>
<li><textarea></textarea><a class="add" href="#"><span>Add another</span></a></li>
</ol>
css:
ol li {
position: relative;
}
ol li .add {
display: none;
}
ol li:last-child .add {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
width: 100%;
height: 100%;
display: block;
animation-duration: 1s;
animation-name: slide;
}
ol li:last-child .add span {
position: absolute;
bottom: -20px;
}
.list li textarea {
position: relative;
animation-duration: 1s;
animation-name: append;
z-index: 1;
}
#keyframes append {
from {
transform: translateX(10%);
opacity: 0;
}
to {
transform: none;
opacity: 1;
}
}
#keyframes slide {
from {
transform: translateY(-100%);
}
to {
transform: none;
}
}
javascript version (code triggered translations)
http://jsfiddle.net/7m8F9/1/
The following obviously doesn't take into account the fact that you are using a template engine to power your DOM manipulations, but all the code needs to work properly is a before and after height of the list (to calculate the difference in height), and an event to trigger at the point where the new list item is added.
Sadly it is not yet possible to do this all in pure CSS, at least not as far as I have seen, perhaps once calc has leveled up...? Or perhaps if some way is introduced to reference the current elements dimensions, not just it's offset parent.
It should be noted I didn't have Internet Explorer around to test this with, but all other modern browsers seem happy.
markup:
<ol class="list">
<li><textarea></textarea></li>
<li><textarea></textarea></li>
</ol>
<div class="add">
Add another
</div>
javascript (with jQuery):
function prefix(){
for ( var a = ['Webkit','Moz','O','ms'], i=0, l = a.length; i<l; i++ ) {
if ( document.body.style[a[i]+'AnimationName'] !== undefined ) {
return { js: a[i], css: '-' + a[i].toLowerCase() + '-' };
}
}
return { css:'', js:'' };
}
$(function(){
$('.add a').click(function(e){
e.preventDefault();
var pref = prefix(),
link = $(this).parent(),
list = $('.list'),
lihi = list.height(),
liad = $('<li><textarea></textarea></li>').appendTo(list),
lihd = lihi - list.height();
link.css(pref.css + 'transform', 'translateY(' + lihd + 'px)');
setTimeout(function(){link.addClass('translate-zero transition-all');},0);
setTimeout(function(){
link.css(pref.css + 'transform', '');
link.removeClass('translate-zero transition-all');
},500);
});
});
css:
.transition-all {
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
.translate-zero {
-webkit-transform: translateY(0) !important;
-moz-transform: translateY(0) !important;
-ms-transform: translateY(0) !important;
-o-transform: translateY(0) !important;
transform: translateY(0) !important;
}
.list li {
animation-duration: 1s;
animation-name: append;
}
#keyframes append {
from {
transform: translateX(10%);
opacity: 0;
}
to {
transform: none;
opacity: 1;
}
}
redesign version
A number of times I have hit a similar issue, only to find a redesign helps do away with the problem and can often actually improve usability. In your case it may be best to place the "add link" above the list (or top right), or integrate the button as a floating icon somewhere... where-ever you put it, it is best to try and keep it in a static location, moving interaction points can be annoying for users, especially if they wish to add more than one item in quick succession.
The simplest solution that i could think of is this.
When you add a new li element, just append it in the dom.
liMarkup = '<li><textarea></textarea></li>'
$('ol').append(liMarkup);
$('ol').find('li').last().css('display','none');
$('ol').find('li').last().show('fast');
This would work as per your requirement :) I hope it helps.
Working Jsfiddle
EDIT: Its easy and better to do it in JS.
Given the following HTML elements and their styles, the bottom left corner of the reflection is trimmed, which is undesirable. I have tried adjusting the height, overflow, margin, padding, etc. and nothing has made the entire image show. Whats the problem here in the first place? Is there anything I can do without changing the structure of the HTML?
//Elements
<div>
<img id="someImage" src="some-img.png"/>
<section class="reflection"></section>
<div>
//Styles
div {
perspecive:600px;
transform-style:perserve-3d;
}
div > img {
transform:rotateY(-60deg);
}
div > .reflection{
background:-moz-element(#someImage) no-repeat;
transform:scaleY(-1);
}
Only works in Mozilla:
http://jsfiddle.net/zorikii/RWfhc/
If anyone is interested its a pretty simple solution. The -moz-element() function takes the element exactly as it is displayed on screen.
The element() CSS function defines an value generated from an arbitrary HTML element. This image is live, meaning that if the HTML element is changed, the CSS properties using the resulting value are automatically updated. - MDN
So all I had to do was add some padding to the top of the original image element...
img{
transform:rotateY(60deg);
-webkit-transform:rotateY(60deg);
padding-top:100px;
}
.reflection{
background: -moz-element(#someImage) no-repeat;
height:400px;width:200px;
-moz-transform: scaleY(-1);
transform: scaleY(-1);
}
Updated Fiddle
You need to set the transform "origin", like this:
html{
background:black;
}
div{
perspective:600px;
-webkit-perspective:600px;
transform-style:preserve-3d;
-webkit-transform-style:preserve-3d;
/* sets origin slightly higher so it just off center */
-webkit-transform-origin: 50% 40%;
}
img{
transform:rotateY(60deg);
-webkit-transform:rotateY(60deg);
}
.reflection{
background: -moz-element(#someImage) bottom left no-repeat;
height:300px;width:200px;
-moz-transform: scaleY(-1);
}