I have a custom CSS button on my site, which rotates fine in Chrome, but Internet Explorer 11 is making it disappear when hovered over, instead of rotating.
You can see the button here (It's the blue "Search now!" button): LINK
When I remove this line from my index file, Chrome will then produce the same wrong effect as IE, so it makes me feel this is causing IE's issue.
<script src="http://taskbasket.net/gallery/themes/matheso/js/modernizr.custom.js"></script>
Can you offer a solution? Thank you.
Internet Explorer doesn't presently have support for preserve-3d, but the team is working to ship it in an upcoming release. That being said, simple examples like yours don't necessarily require this feature, and could be implemented in a more cross-browser manner.
I played a bit with replicating your effect by transitioning two pseudo elements independently:
<div id="button1">
<!-- Preserved your markup -->
</div>
a {
position: relative;
perspective: 500px;
}
a, a::before, a::after {
color: #FFF;
display: inline-block;
line-height: 44px;
box-sizing: border-box;
width: 155px; height: 44px;
backface-visibility: hidden;
text-decoration: none;
text-align: center;
}
a::before, a::after {
top: 0; left: 0;
position: absolute;
content: attr(data-text);
transition: transform 1s;
}
a::before {
background: #0965A0;
transform-origin: 50% 100%;
}
a::after {
background: #2195DE;
transform-origin: 50% 0%;
transform: translateY(100%) rotateX(-90deg);
}
a:hover::before {
transform: translateY(-100%) rotateX(90deg);
}
a::before, a:hover::after {
transform: translateY(0) rotateX(0);
}
Fiddle: http://jsfiddle.net/jonathansampson/ybjv8d7x/
Your effect needs preserve-3d to work.
And preserve-3d is not supported in IE, even though it is planned in the next version
By the way, it is a CSS related problem, javascript is working ok
Related
I'm building a small website without JS for school and I'm stuck on an animation problem.
I want to get rid of the closing animation on my mobile menu when resizing the window. Because currently, if I reduce the size of the window the menu will appear for a brief moment before going to the side (outside of the viewport).
My menu general style in the media query is the following :
.menu {
position: fixed;
z-index: 80;
width: 19rem;
transform: translateX(100%);
height: 100%;
top: 0;
right: 0;
padding-top: 4.4rem;
justify-content: revert;
text-align: right;
box-shadow: var(--b-shadow-l);
background-color: seagreen;
/* todo */
transition: 800ms;
}
When the menu is opened :
#mobile:checked ~ .menu {
transform: translateX(0%);
transition-property: transform;
transition-duration: 800ms;
}
Codepen to better see the situation : https://codepen.io/aayko/pen/OJEErBM
My only solution so far is to remove the closing animation ...
I'm looking for anything, even if it means changing the way I style my mobile menu.
Just remove the whole transform in your code above, instead give the right: -100% when normal and right: 0 when checked, the animation is the same without the flash disappear.
.menu {
position: fixed;
z-index: 80;
width: 19rem;
height: 100%;
top: 0;
right: -100%;
padding-top: 4.4rem;
justify-content: revert;
text-align: right;
box-shadow: var(--b-shadow-l);
background-color: seagreen;
/* todo */
transition: 800ms;
}
#mobile:checked ~ .menu {
right: 0;
}
I recently came across this exact same issue and ended up figuring out a pretty good solution to it. I documented it all at https://stevenwoodson.com/blog/solving-animation-layout-flickering-caused-by-css-transitions/ if you're still in need of a fix!
The gist is that the transition needs to be added separately in a different class so you can remove it when you're not actively opening or closing the menu.
<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've been working on variations of this issue for a while. Currently I have the animation working in all browsers, but setting the body margin to 0 in FF breaks it as shown below.
I've had to target all other browsers, set the body margin, and just leave it showing in FF. Obviously this isn't ideal as I'd like the layout to be uniform.
Please use firefox to re-create the issue.
Here's the working Jsfiddle
HTML
<header class="header">
<div class="header-container">
<div class="top-header-ani ani slide-t navbar">
Home</div>
<div class="main-header-ani"><span class="mainheader">△</span></div>
<div class="bottom-header-ani ani slide-b">
<span class="maintitle">tetris<span class="yel">for</span>kicks</span>
<br>
<span class="subtitle">web development & design</span></div>
</div>
</header>
CSS
header {
margin-top: 50px;
}
.header-container {
width: 100%;
height: 200px;
margin: 100px 0 0 0;
position: absolute;
}
.main-header-ani {
font-family: 'quicksand', helvetica;
text-align: center;
line-height: 200px;
background-color: #a2aba2;
width: 100%;
height: 200px;
position: relative;
}
.top-header-ani {
width: 100%;
height: auto;
text-align: center;
position: relative;
z-index: -1;
}
.bottom-header-ani {
width: 100%;
height: auto;
text-align: center;
position: relative;
z-index: -1;
}
/*................... index font stying ...................*/
.yel {
color: #eac961;
}
.navbar {
text-transform: uppercase;
font-family: helvetica;
word-spacing: 10px;
}
.maintitle {
color: #a2aba2;
font-family: helvetica;
font-size: 50pt;
}
.mainheader {
color: #fff;
font-size: 110pt;
}
.subtitle {
font-family: helvetica;
}
header a {
color: #000;
text-decoration: none;
}
header a:hover,
header a.hover {
color: #eac961;
}
/*................... index header animations ...................*/
.ani {
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.slide-t {
animation-name: slide-t;
}
#keyframes slide-t {
from {
transform: translate3d(0, 100%, 0);
visibility: visible;
}
to {
transform: translate3d(0, -100%, 0);
}
}
.slide-b {
animation-name: slide-b;
}
#keyframes slide-b {
from {
transform: translate3d(0, -100%, 0);
visibility: visible;
}
to {
transform: translate3d(0, 10%, 0);
}
}
Run the above. You'll see that both animations transtion from behind the heasder div perfectly.
If you add the CSS:
body {
margin: 0
}
To the jsfiddle, you'll notice the bottom aniation stretches as it plays out.
Does anyone know why this is occuring?
Does anyone know how to fix it?
I've tried -moz- animations settings, no effect.
I've also got an idea for a work around:
Currently in firefox I get a scroll bar at the bottom due to the extra space taken up by the body's margin. If there's a way for me to set the scroll position to the absolute right by default, I can hide the X scroll bar and disable it which would hide the body margin entierly.
-
Anyway, this one's killing me. Any ideas are greatly appreciate.
Thanks.
Ok, so I've figured out the issue.
It's actually a display driver issue with my laptop. XPS 13 9530.
My friend checked the test site upload on his PC and it works perfectly as it is, I get the ghosting on my laptop. So I tested on another PC, and it works perfectly.
I disabled hardware acceleration in my FF and it works perfectly.
I've tried various graphics drivers, but it appears to be a windows 10 issue with my laptop. I'm getting a few other weird issues with firefox rendering, for instance the close buttons on my tab bars are duplicated, sometimes FF loads with a full white screen and I need to restart it, etc...
So, mark this as fixed. Thanks very much for your help.
Try using "px" values for firefox, not "%" for
transform: translate3d(0, -100px, 0);
Import the normalize.css:
<link rel="stylesheet" href="https://necolas.github.io/normalize.css/3.0.2/normalize.css">
or download it from:
Here
I made a css transition for navigation items in my web pages main nav.
It's a relativley simple effect using the items before element to mask out and hide the text using css transforms and flexbox.
I developed in Chrome and tested in Firefox and Safari (all latest versions) and had to discover that Safari ist not displaying the transition correctly.
I created a short pen, so you can get an idea of the effect.
http://cssdeck.com/labs/owntbier
Is there any way to fix it?
I guess it has something to do with the way that safari interprets the "justify-content" property.
Here is the Code:
HTML
<div class="container">
<ul>
<li>WHY SAFARI, WHY?</li>
</ul>
</div>
SCSS
.container{
position:absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
ul{
list-style-type: none;
}
li{
white-space: nowrap;
position: relative;
color: #ff9900;
cursor: pointer;
font-size: 5vw;
font-weight: 900;
&:hover{
&:before{
max-width: 100%;
}
}
&:before{
position:absolute;
left: 50%;
transform: translateX(-50%);
color: #131313;
content: 'WHY SAFARI, WHY?';
display: flex;
justify-content: center;
overflow: hidden;
max-width: 0%;
transition: max-width 0.5s ease;
}
}
NOTE
Necessary vendor prefixes are automatically added by my preprocessor
Your code wont work on Internet explorer 9 also .
all you need to add is ::
For Safari--
**-webkit-transform:translateX(-50%) translateY(-50%);**
For IE9--
**-ms-transform:translateX(-50%) translateY(-50%);**
Hope it works.
I have a wordpress website and I'd like to add some features that my current theme doesn't offer. I'd like the 3 images in the "Pages" section to reduce in size or switch to a different image (same content, smaller resolution) so as to appear smaller then you hover over it. I've managed to accomplish this with a custom HTML page, adding ID's to the images and then adding a version of this to my style.css for each image
#techbutton {
display: block;
width: 125px;
height: 125px;
background: url("http://rafsk.co.uk/wp-content/uploads/2015/10/Logo21-e1445171629993.png") no-repeat 0 0;
}
#techbutton:hover {
background: url("http://rafsk.co.uk/wp-content/uploads/2015/10/Logo2-hover-e1445296643552.png") no-repeat 0 0;
}
#techbutton span {
position: absolute;
top: -999em;
}
After uploading the custom HTML to my server I realised that instead of just overriding the homepage of rafsk.co.uk it also overrode the homepages of all my subdomains.
So how can I do this?
You could do this with a css transform, that would be the easiest way, and you can apply it to all three with a class instead of an id (which should only be used once per page):
So first give the same class to all of the images (meaning to the actual image tag, like <img class="imageclass" src="blah.png" />), and use this in your css:
.imageclass {
display: block;
width: 125px;
height: 125px;
transform: scale(1,1);
}
.imageclass:hover {
transform: scale(0.9,0.9);
}
You could then add a css transition effect if you want it to be smoother:
.imageclass {
display: block;
width: 125px;
height: 125px;
transform: scale(1,1);
transition: transform 0.6s ease-in-out;
}
.imageclass:hover {
transform: scale(0.9,0.9);
}
Here is a working example:
https://jsfiddle.net/f9teea7L/
ALTERNATIVE OPTION #1:
If you can't edit the HTML and can only get an image into the div through the background, you could try adding a background-size property like this. Be aware though that it won't work in IE 8 or lower:
#techbutton {
display: block;
background-image: url('http://vignette1.wikia.nocookie.net/deadliestfiction/images/d/d5/2138464123_1360632315.jpg/revision/latest?cb=20140513035922');
background-size: 100%,100%;
width: 125px;
height: 125px;
transform: scale(1,1);
transition: transform 0.6s ease-in-out;
}
#techbutton:hover {
transform: scale(0.9,0.9);
}
Working Example: https://jsfiddle.net/azx962a9/
ALTERNATIVE OPTION #2:
I've looked at your site though and if I'm understanding what you want to do, it seems to me that simply adding this to your css should work...:
.service-icon {
transform: scale(1,1);
transition: transform 0.6s ease-in-out;
}
.service-icon:hover {
transform: scale(0.9,0.9);
}