I've built a simple navigation component for my website, which has left and right swinging 'doors.' These work great in all browsers except for Safari, where the 'door' seems to disappear entirely behind its background when your mouse moves from one door to another. Mousing over one door at a time works fine, as long as you wait for the animation to stop before touching the blue door.
Also, one page of my site has a fixed background video, and on that page the animations do not work at all, the entire div disappears as soon as you hover over it.
I've been working on this issue for quite a while and cannot think of a possible reason for this weird behavior. If I implement the animation without putting it in a bootstrap grid, it works, but once the background video is involved it causes the same problem seen in this codepen.
Thanks in advance for any ideas why this is happening!
HTML:
<head>
<link href="css/bootstrap.css" rel="stylesheet"/>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-6 greenbackground">
<a href="#">
<div class="greenlink doorleft">
<h1>Left Swing Link</h1>
</div>
</a>
</div>
<div class="col-xs-6 bluebackground">
<a href="#">
<div class="bluelink doorright">
<h1>Right Swing Link</h1>
</div>
</a>
</div>
</div>
</div>
<body>
CSS:
.greenlink{
width: calc(100% + 30px);
padding-top:5em;
padding-bottom:5em;
text-align:center;
background-color: lightgreen;
margin-left:-15px;
}
.greenbackground{
background-color: green;
}
.bluelink{
width: calc(100% + 30px);
padding-top:5em;
padding-bottom:5em;
text-align:center;
background-color:lightblue;
margin-left:-15px;
}
.bluebackground{
background-color:blue;
}
.doorleft{
transition: all 500ms ease;
transform: perspective(900px) rotateY(0deg);
transform-origin: 0% 0%;
-webkit-transform-style: preserve-3d;
}
.doorleft:hover {
transform: perspective(1000px) rotateY(30deg);
}
.doorright {
transition: all 500ms ease;
transform: perspective(900px) rotateY(0deg);
transform-origin: 100% 0%;
-webkit-transform-style: preserve-3d;
}
.doorright:hover {
transform: perspective(1000px) rotateY(-30deg);
}
Here's the link to a codepen: https://codepen.io/anon/pen/RgBdJp
I have no idea why, but giving .col-xs-6 position: static solves it (bootstrap gives it position: relative). In this case it doesn't affect anything else so should be ok. Clearly it's a Safari issue.
Related
<div class="parentContainer">
<a href="#" class="itemContainer">
<div class="imgContainer"><img src="http://via.placeholder.com/180x180" class="image"/></div>
<div class="title">Title</div>
</a>
</div>
check this link- https://codepen.io/aby30/pen/mqOMom
Here's a Pen that shows how transform:translate along with overflow:hidden is rendered differently on Chrome and Safari (open the link in both browsers and hover over image to see the difference). But when I take a different approach and use positioning (left negative to 30px) for movement instead of transform of the image I get the desired result in Safari along with other browsers.
I'm not able to get my head around this unusual behaviour.
Difference: In Safari when using translate property, then on hover of the image it translates toward right with full square image appearing only while the translation is happening. This is not expected as the parent(.imgContainer) of the image has overflow property as hidden so the edges of the image should not appear at any time.
This is just a bug, and as with all bugs of this nature the fix seems to be as simple as applying any 3d css property to the flickering element.
For example:
.imgContainer {
-webkit-transform: translateZ(0);
...
This is a common issue with Safari.
To solve this use border-radius ( the same one ) on the .image or img as well.
Then you should use vendor prefix for safari -webkit-transform ; -webkit-translate and so on.
Also you could 'force' graphic/hardware acceleration by using a 3d transform with value 0. This way, you ' trick ' the browser to think that there is a complex 3d animation so it allocates more resources.
see snippet below
a* {
color: #333;
}
.parentContainer {
width: 200px;
text-align: center;
}
.imgContainer {
background-color: #fff;
border-radius: 53%;
width: 130px;
height: 130px;
margin: 0px auto 18px;
overflow: hidden;
}
.itemContainer {
display: block;
transition: all 0.3s ease;
}
.image {
display: block;
position: relative;
-webkit-transition: all 0.3s ease;
-webkit-transform: translate(-30px, 0px) translateZ(0);
/* left: -30px; */
bottom: -10px;
border-radius: 53%;
width: 100%;
height: 100%;
}
.imgContainer:hover > .image {
/* left: 0px; */
-webkit-transform: translate(0px, 0) translateZ(0);
}
<div class="parentContainer">
<a href="#" class="itemContainer">
<div class="imgContainer"><img src="http://via.placeholder.com/180x180" class="image"/></div>
<div class="title">Title</div>
</a>
</div>
I'm trying to integrate eBay's great zoom and pan on hover for images into my CSS code. So far, I've managed to zoom into the image without regards of placement and without it panning while the cursor hovers over the image. eBay has a great working code which I'd love to incorporate into my own CSS sheet.
This is what I have so far...
div.product div.gallery img {
max-width: 100%;
max-height: 100%;
vertical-align: middle;
display: inline-block;
}
div.product div.gallery img:hover {
transform: scale(2.10);
-o-transform: scale(2.10);
-ms-transform: scale(2.10);
-moz-transform: scale(2.10);
-webkit-transform: scale(2.10);
transition:transform 0.75s ease;
I was looking into eBay's style sheets, but they have several with so much code. I was overwhelmed. Can anyone more advanced help me out with that code I'm missing? Thank you so much! :)
You need to hide overlapping parts of the image when it's size is increased. I updated your code snippet. I would also recommend to add the transition on the img, not the :hover.
div.product div.gallery {
width: 200px;
height: 200px;
overflow: hidden;
}
div.product div.gallery img {
max-width: 100%;
max-height: 100%;
transition: transform 0.25s ease;
}
div.product div.gallery img:hover {
transform: scale(2);
}
<div class="product">
<div class="gallery">
<img src="https://i.imgur.com/uBjSQgP.png" alt="">
</div>
</div>
Second, if you want to recreate the Image Zoomer (Pan Zoom) then you will need to use a javascript plugin to recreate this. I did some research and found some interesting candidates that could help you:
http://www.elevateweb.co.uk/image-zoom/examples
http://www.jacklmoore.com/zoom/
https://github.com/timmywil/jquery.panzoom
I am having trouble with stacking images in HTML/CSS for some reason. I have three slides, stacked on top of each other, slightly offset so that they peak out from under one another, bottom-to-top. The animation I am using should allow them to slide over to the right when I hover on the edge that is "peaking out." It works perfectly with two images, but for some reason, when I added a third to the pile, the animation for the bottom two stopped working. NO CLUE why this won't work.
Here is the code:
#containerContainer {
position: relative;
}
#instashContainer,
#wisdomCotainer,
#visContainer {
position: absolute;
height: 744px;
width: 1860px;
overflow: hidden;
}
#instashContainer img,
#wisdomContainer img,
#visContainer img {
opacity: .7;
position: absolute;
left: 0px;
top: 0px;
transform: translate3d(-1600px, 0px, 0px);
transition: transform .6s ease-in-out;
}
#instashContainer img:hover,
#wisdomContainer img:hover,
#visContainer img:hover {
transform: translate3d(0px, 0px, 0px);
}
<div id="containerContainer">
<!--Inspiration Slidepage-->
<div id="instashContainer">
<img src="instash_slidepage.jpg" height=744 width=1820>
</img>
</div>
<!--Wisdom Slidepage-->
<div id="wisdomContainer">
<img src="wisdom_slidepage.jpg" height=744 width=1780>
</img>
</div>
<!--Visualization Slidepage-->
<div id="visContainer">
<img src="visualization_slidepage.jpg" height=744 width=1740>
</img>
</div>
</div>
When I add the third image, on top of the other two, the animation for the other two stops working, but the animation for the top image works (i.e. it slides to the right). When I remove the top image, but change nothing else, the animation for the other two works again.
Why? Also, how can I add this third image without impacting the animation of the other two images?
Problem
you have a typo here: #wisdomCotainer, should be#wisdomContainer
Notes
don't use HTML tags width/height, use instead CSS
<img> tag are self-closed tags, therefore don't need </img>
and you can simplify your CSS in this case by using the direct child selector >
#containerContainer {
position: relative;
}
#containerContainer > div {
position: absolute;
height: 744px;
width: 1860px;
overflow: hidden;
}
#containerContainer > div img {
opacity: .7;
position: absolute;
left: 0px;
top: 0px;
transform: translate3d(-1600px, 0px, 0px);
transition: transform .6s ease-in-out;
height: 744px;
width: 1820px;
}
#containerContainer > div img:hover {
transform: translate3d(0px, 0px, 0px);
}
<div id="containerContainer">
<!--Inspiration Slidepage-->
<div id="instashContainer">
<img src="//lorempixel.com/1280/744" />
</div>
<!--Wisdom Slidepage-->
<div id="wisdomContainer">
<img src="//lorempixel.com/1280/744" />
</div>
<!--Visualization Slidepage-->
<div id="visContainer">
<img src="//lorempixel.com/1280/744" />
</div>
</div>
You've got a typo error here :
#instashContainer, #wisdomCotainer, #visContainer {
}
Should be #wisdomContainer instead.
I'm trying to make a html page with a cube on it, each face of said cube would have buttons on it. On the default face all the buttons work fine, however, as soon as I rotate the cube the new face looses all interactivity.
HTML:
<button type="button" id="button">Toggle</button>
<hr>
<div id="cube">
<div class="face one"></div>
<div class="face two">
<button type="button">All</button>
<button type="button">News</button>
<button type="button">Media</button>
<button type="button">Events</button>
</div>
<div class="face three"></div>
<div class="face four"></div>
<div class="face five">
<button type="button">All</button>
<button type="button">News</button>
<button type="button">Media</button>
<button type="button">Events</button>
</div>
<div class="face six"></div>
</div>
CSS:
#cube {
position: relative;
height: 400px;
-webkit-transition: -webkit-transform 2s linear;
-webkit-transform-style: preserve-3d;
}
.face {
position: absolute;
height: 360px;
background-color:#ffffff;
}
#cube .one {
-webkit-transform: rotateX(90deg) translateZ(200px);
}
#cube .two {
-webkit-transform: translateZ(200px);
}
#cube .three {
-webkit-transform: rotateY(90deg) translateZ(200px);
}
#cube .four {
-webkit-transform: rotateY(180deg) translateZ(200px);
}
#cube .five {
-webkit-transform: rotateY(-90deg) translateZ(200px);
}
#cube .six {
-webkit-transform: rotateX(-90deg) translateZ(200px) rotate(180deg);
}
And JS:
$("#button").click(function () {
$('#cube').css("-webkit-transform", "rotateX(0deg) rotateY(90deg)");
});
Here's a Fiddle link demonstrating my problem: http://jsfiddle.net/x66yn/
(Note that the demo will only work on webkit browsers.)
You need to give the elements a non-static position. This is because the elements are not currently positioned in their parent, with the parent being moved forward it covers the children
button {
position: relative; /* Or absolute, fixed */
}
Demo
Note: I added a cursor change on hover to show it works
The other option is to move the buttons forward in the Z direction greater than or equal to it's parent z-axis movement since you're doing so with the parent
button {
-webkit-transform: translateZ(200px); /* Equivalent or greater than parent's*/
transform: translateZ(200px);
}
Demo
In your case specifically, the back panel will not work just using the above, the angle of the right button also cannot be 90 (some some reason which I don't know for sure). It has to do with how the browser is rendering it. As a result, just use 89.999 which is indistinguishable to us but works fine
$("#buttonRight").click(function () {
$('#cube').css("-webkit-transform", "rotateX(0deg) rotateY(89.999deg)");
});
I had similar problem, but for me help remove from cube(DIV) this ruls: backface-visibility : hidden; and rotate cube by 89.99 (just two "9" after dot)
With this cube work in Chrome, Firefox, Safari and IE11
Using a front and back panel set up on a web page to display information in paragraphs, it all works fine except for when you have abbr. tags or use links on the panel, these must be on the right hand side to work (back panel), if they appear on the left side then they do not work.
The panel seems to be broken up into two halves, where links will work on the left on the front side (have to be quick as it will start to spin when you hover over the front), this is seen by hovering the mouse cursor over the text on the rear panel as you hit the halfway mark the style of cursor changes from an arrow to a sort of capital I, this signifies where the links start to work, it is causing problems when the user changes the zoom on the page as the text slightly adjusts itself with these changes and it moves some links to the dead section of the panel, can't see why links won't work across the whole panel....
P.S. site is under construction, but can be seen at:
http://robtsani.com/our-solar-system/index.html
CSS code:
/* positioning of panel2*/
#panel2 {
position:absolute;
top: 300px; left: 790px;
perspective: 1000;
-moz-perspective: 1000;
-webkit-perspective: 1000;
z-index: 35;
}
#panel2 p {
font-size: 14px;
padding: 10px;
}
#panel2 .front {
background: rgba(204,204,51,0.5);
border-radius: 30px;
top: 0; left: 0;
z-index: 30;
padding-bottom: 20px;
}
#panel2 .back {
background: rgba(46,227,240,0.5);
border-radius: 30px;
transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
top: 0; left: 0;
padding-bottom: 20px;
}
/* sets the size of the spin panel2*/
#panel2 .spin-panel {
width: 500px; height: 920px;
}
/* sets the rotation to occur on a hover over a panel*/
.spin-panel:hover .spinner {
transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
}
/* the actual rotation*/
.spinner {
transition: all 1.9s linear;
transform-style: preserve-3d;
-moz-transition: all 1.9s linear;
-webkit-transition: all 1.9s linear;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
position:relative;
}
/* sets the non facing side to be invisible */
.front, .back {
backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-ms-backface-visibility: hidden; /* needs this as not supported in IE10*/
position: absolute;
top:0; left:0;
}
and the html5:
<section id="panel2">
<div class = "spin-panel">
<div class = "spinner">
<div class = "front">
<article>
<h4>About...</h4>
<p>Mars is the fourth planet, etc......</p>
</article>
</div>
<div class = "back">
<article>
<h4>Missions...</h4>
<p>There have been over 40 missions to Mars in the past 50 years.
Most notable ones have been the recent landings of rover vehicles.
<a href = "http://solarsystem.nasa.gov/missions/profile.cfm? Sort=Target&Target=Mars&MCode=Pathfinder">
Pathfinder</a> landed on the surface in 1997 releasing Sojourner
the first wheeled robot to explore another planet.
</p>
<p>In 2004 the twin missions <a href = "http://solarsystem.nasa.gov/missions/profile.cfm?Sort=Target&Target=Mars&MCode=MER">
Spirit and Opportunity</a> landed on the surface of Mars. Spirit
explored years beyond its original 92 days mission.
Opportunity
is still working and has covered more than 38km as of October
2013.
</p>
</article>
</div>
</div>
</div>
</section>
Left the links in and some text on the back panel...Hope there is a simple solution to this been staring at it for days...
Ok,
Did not see the link to a similar question on the right hand side of the page near the bottom, its quick fix was to change the rotation to -180 degrees instead, this has worked and the panel can now be used on both sides, still confused though as to why it would not work with the transform set to 180 degrees ???