I am trying to transform a button, but it is really grainy (During the transform) in firefox.
Can someone take a look, the code is below... and the js fiddle link is attached here https://jsfiddle.net/L3f9cy7g/1/
As I said. The issue is only in firefox, and I think it has something to do with anti-aliasing. We tried switching it to a 3d transform, and adjusting the z-index to prevent the firefox browser from messing with the animation. No luck so far.
<div class="closePop">
<p></p>
</div>
body{background:black;}
.closePop {
right: -5px;
top: -5px;
height: 28px;
background-color: #f68d1e;
color: white;
border-radius: 50%;
width: 29px;
text-align: center;
border-style: solid;
border-width: 2px;
vertical-align: middle;
cursor: pointer;
transform: rotate(0deg);
transition: all .3s ease-out;
}
.closePop p {
margin: 0;
margin-top: 4px;
}
.closePop:hover p:after {
content:':(';
transition:contentArea 3s ease-out rotate .3s ease-out;
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: translateZ(1px) rotate(0deg);
}
.closePop p:after {
content: 'X';
transition: all .3s ease-out;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: translateZ(1px) rotate(90deg);
}
.closePop:hover {
border-radius: 0;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: translateZ(1px) rotate(90deg);
}
.closePop p {
transition: contentArea .3s ease-out rotate .3s ease-out;
}
Try to add a transparent outline attribute,
outline: 1px solid transparent;
Related
I have a hover animation for a button but it doesn't seem to trigger.
Button:
<button class="submit-button">Send</button>
The css:
.submit-button {
background: transparent;
border: 3px solid #edc27b;
cursor: pointer;
float: left;
letter-spacing: 2px;
outline: none;
overflow: hidden;
padding: 25px 80px;
position: relative;
color: #edc27b;
font-family: "baron-neue-regular", "Helvetica", "Arial" !important;
text-transform: lowercase;
}
.submit-button::after {
content: '';
height: 100%;
left: 50%;
opacity: 0;
position: absolute;
top: 50%;
z-index: -1;
width: 100%;
background: #101010;
-webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
-moz-transform: translateX(-50%) translateY(-50%) rotate(45deg);
-ms-transform: translateX(-50%) translateY(-50%) rotate(45deg);
-o-transform: translateX(-50%) translateY(-50%) rotate(45deg);
transform: translateX(-50%) translateY(-50%) rotate(45deg);
}
.submit-button:hover::after{
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
opacity: 1;
}
What it's supposed to do is trigger another recktangle (the ::after pseudo class) to transition in from the middle across the button. This one is rotated 45 degrees so that the corners appear to be cut. I can't figure out what the problem might be.
Alright, thanks to Temani Afif I figured out that I never changed the movement, only the opacity
Before:
.submit-button:hover::after{
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
opacity: 1;
}
After:
.submit-button:hover::after{
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
-webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
-moz-transform: translateX(-50%) translateY(-50%) rotate(45deg);
-ms-transform: translateX(-50%) translateY(-50%) rotate(45deg);
-o-transform: translateX(-50%) translateY(-50%) rotate(45deg);
transform: translateX(-50%) translateY(-50%) rotate(45deg);
opacity: 1;
}
I have made a full page overlay menu that is displayed when click on the custom made icon. Its working fine on Android devices and in chrome inspector it works fine for all devices but when I test it on actual iPhone device menu doesn't appear.
Here is the screenshot of the icon before clicking it display like this :
When we click on it, display menu like this:
This menu is opened on iPhone x in chrome responsive tool but when I open it on actual iPhone device it didn't open.
I have tried a fix of adding onclick=void(0) like this
HTML Code
<div id="nav-icon2" onclick = "void(0)">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
CSS:
#nav-icon2 {
width: 60px;
height: 45px;
position: relative;
margin: 50px auto;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
#nav-icon2 span {
display: block;
position: absolute;
height: 9px;
width: 50%;
background: #d3531a;
opacity: 1;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
#nav-icon2 span:nth-child(even) {
left: 50%;
border-radius: 0 9px 9px 0;
}
#nav-icon2 span:nth-child(odd) {
left:0px;
border-radius: 9px 0 0 9px;
}
#nav-icon2 span:nth-child(1), #nav-icon2 span:nth-child(2) {
top: 0px;
}
#nav-icon2 span:nth-child(3), #nav-icon2 span:nth-child(4) {
top: 18px;
}
#nav-icon2 span:nth-child(5), #nav-icon2 span:nth-child(6) {
top: 36px;
}
#nav-icon2.open span:nth-child(1),#nav-icon2.open span:nth-child(6) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#nav-icon2.open span:nth-child(2),#nav-icon2.open span:nth-child(5) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#nav-icon2.open span:nth-child(1) {
left: 5px;
top: 7px;
}
#nav-icon2.open span:nth-child(2) {
left: calc(50% - 5px);
top: 7px;
}
#nav-icon2.open span:nth-child(3) {
left: -50%;
opacity: 0;
}
#nav-icon2.open span:nth-child(4) {
left: 100%;
opacity: 0;
}
#nav-icon2.open span:nth-child(5) {
left: 5px;
top: 29px;
}
#nav-icon2.open span:nth-child(6) {
left: calc(50% - 5px);
top: 29px;
}
JS:
$ = jQuery.noConflict();
$(document).ready(function(){
$('#nav-icon2').click(function(){
$(this).toggleClass('open');
});
});
But it didn't work for me. Here is my code for custom hamburger icon
Demo
Please, help me what's the problem I'll be very thankful to you.
I've a burger icon, like this - when clicked it becomes a "X" using only CSS3 (website link here)
But my client are seeing something like this (only on iPad):
My question is:
1) What can be causing this?
2) How can I reproduce errors like this as I don't have an iPad and resizing the browser (developer tools) doesn't reproduce the error?
.mobile-nav {
position: fixed;
z-index: 10103;
bottom: 40%;
left: 45%;
margin-top: -230px;
pointer-events: none;
}
.mobile-nav .mobile-nav-bg {
/* this is the stretching navigation background */
position: absolute;
z-index: 10102;
top: 0;
right: 0;
width: 60px;
height: 60px;
border-radius: 30px !important;
background: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
webkit-transition: height .2s, box-shadow .2s;
-webkit-transition: height .2s, box-shadow .2s;
transition: height .2s, box-shadow .2s;
}
.mobile-nav-trigger {
position: absolute;
z-index: 10103;
top: 2px;
right: 0;
height: 60px;
width: 60px;
border-radius: 50% !important;
overflow: hidden;
white-space: nowrap;
color: transparent;
pointer-events: auto;
}
.mobile-nav-trigger span,
.mobile-nav-trigger span::after,
.mobile-nav-trigger span::before {
/* this is the hamburger icon */
position: absolute;
width: 16px;
height: 2px;
background-color: #000;
}
.mobile-nav-trigger span {
/* middle line of the hamburger icon */
webkit-transition: background-color 0.2s;
-webkit-transition: background-color 0.2s;
transition: background-color 0.2s;
left: 50%;
top: auto;
bottom: 50%;
right: auto;
webkit-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
.mobile-nav-trigger span::after,
.mobile-nav-trigger span::before {
/* top and bottom lines of the hamburger icon */
content: '';
bottom: 0;
left: 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
webkit-transition: transform 0.2s;
-webkit-transition: -webkit-transform 0.2s;
transition: -webkit-transform 0.2s;
transition: transform 0.2s;
transition: transform 0.2s, -webkit-transform 0.2s;
}
.mobile-nav-trigger span::before {
webkit-transform: translateY(-6px);
-webkit-transform: translateY(-6px);
transform: translateY(-6px);
}
.mobile-nav-trigger span::after {
webkit-transform: translateY(6px);
-webkit-transform: translateY(6px);
transform: translateY(6px);
}
.nav-is-visible .mobile-nav-trigger span {
background-color: transparent; }
.nav-is-visible .mobile-nav-trigger span::before {
webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg); }
.nav-is-visible .mobile-nav-trigger span::after {
webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://188.166.163.149/static/theme/global/plugins/bootstrap/js/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
$('nav').click(function() {
$(this).toggleClass('nav-is-visible');
});
});
</script>
<div class="box">
<nav class="mobile-nav visible-xs visible-sm nav-is-visible"><a class="mobile-nav-trigger menu-trigger" href="#0"><span aria-hidden="true"></span></a><ul><li></li></ul><span aria-hidden="true" class="mobile-nav-bg"></span></nav>
</div>
In many cases your vendor prefixes are not correct. For example:
.mobile-nav-trigger span {
...
webkit-transition: background-color 0.2s;
-webkit-transition: background-color 0.2s;
transition: background-color 0.2s;
...
}
The first statement of these 3 is not legal in any browser I know of. The first line (no dash before "webkit") needs to be removed in all cases. The other two lines are valid; and should be present in all cases.
Although I haven't tested this definitively, it certain could be causing the issue you are experiencing.
Sign up for a free Apple Developer account, Download XCode and you can run the iOS device emulator as an iPad. That will allow you to test your potential fixes. You do need a Mac, however. But, that's the only way I know how you could do it other than buying or borrowing an iPad.
I am trying to work out ihover with bootstrap but its not working. I searched for this problem and tried the solution provided but still its not working. The answer is not satisfactory.This is the code that I am trying to implement. I took it from this link. I added css from this link. Please tell me what am I missing?
<div class="col-md-6">
<div class="ih-item square effect7">
<a href="#">
<div class="img"><img src="homepage-pics/electrician.jpg"></div>
<div class="info">
<h3>Electrician</h3>
<p>Need an electrician?click here</p>
</div>
</a>
</div>
</div>
The issue is with the anchor in your .info p tag. if you remove the anchor from this <p>, it works.
.ih-item {
position: relative;
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out
}
.ih-item,
.ih-item * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
.ih-item a {
color: #333
}
.ih-item a:hover {
text-decoration: none
}
.ih-item img {
width: 100%;
height: 100%
}
.ih-item.circle {
position: relative;
width: 220px;
height: 220px;
border-radius: 50%
}
.ih-item.circle .img {
position: relative;
width: 220px;
height: 220px;
border-radius: 50%
}
.ih-item.circle .img:before {
position: absolute;
display: block;
content: '';
width: 100%;
height: 100%;
border-radius: 50%;
box-shadow: inset 0 0 0 16px rgba(255, 255, 255, 0.6), 0 1px 2px rgba(0, 0, 0, 0.3);
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out
}
.ih-item.circle .img img {
border-radius: 50%
}
.ih-item.circle .info {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
text-align: center;
border-radius: 50%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden
}
.ih-item.square {
position: relative;
width: 316px;
height: 216px;
border: 8px solid #fff;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3)
}
.ih-item.square .info {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
text-align: center;
-webkit-backface-visibility: hidden;
backface-visibility: hidden
}
.ih-item.circle.effect7 .img {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
-webkit-transition: all 0.35s ease-out;
-moz-transition: all 0.35s ease-out;
transition: all 0.35s ease-out
}
.ih-item.circle.effect7.colored .info {
background: #1a4a72
}
.ih-item.circle.effect7 .info {
background: #333;
opacity: 0;
visibility: hidden;
pointer-events: none;
-webkit-transition: all 0.35s ease 0.2s;
-moz-transition: all 0.35s ease 0.2s;
transition: all 0.35s ease 0.2s
}
.ih-item.circle.effect7 .info h3 {
color: #fff;
text-transform: uppercase;
position: relative;
letter-spacing: 2px;
font-size: 22px;
margin: 0 30px;
padding: 55px 0 0 0;
height: 110px;
text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0, 0, 0, 0.3)
}
.ih-item.circle.effect7 .info p {
color: #bbb;
padding: 10px 5px;
font-style: italic;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid rgba(255, 255, 255, 0.5)
}
.ih-item.circle.effect7 a:hover .img {
opacity: 0;
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-ms-transform: scale(0.5);
-o-transform: scale(0.5);
transform: scale(0.5)
}
.ih-item.circle.effect7 a:hover .info {
visibility: visible;
opacity: 1
}
.ih-item.circle.effect7.left_to_right .info {
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%)
}
.ih-item.circle.effect7.left_to_right a:hover .info {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0)
}
.ih-item.circle.effect7.right_to_left .info {
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%)
}
.ih-item.circle.effect7.right_to_left a:hover .info {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0)
}
.ih-item.circle.effect7.top_to_bottom .info {
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
-o-transform: translateY(100%);
transform: translateY(100%)
}
.ih-item.circle.effect7.top_to_bottom a:hover .info {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0)
}
.ih-item.circle.effect7.bottom_to_top .info {
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%)
}
.ih-item.circle.effect7.bottom_to_top a:hover .info {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0)
}
.ih-item.square.effect7 {
overflow: hidden
}
.ih-item.square.effect7.colored .info {
background: #1a4a72;
background: rgba(26, 74, 114, 0.6)
}
.ih-item.square.effect7.colored .info h3 {
background: rgba(12, 34, 52, 0.6)
}
.ih-item.square.effect7 .img {
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1)
}
.ih-item.square.effect7 .info {
background: #333;
background: rgba(0, 0, 0, 0.6);
visibility: hidden;
opacity: 0;
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out
}
.ih-item.square.effect7 .info h3 {
text-transform: uppercase;
color: #fff;
text-align: center;
font-size: 17px;
padding: 10px;
background: #111;
margin: 30px 0 0 0;
-webkit-transform: scale(4);
-moz-transform: scale(4);
-ms-transform: scale(4);
-o-transform: scale(4);
transform: scale(4);
-webkit-transition: all 0.35s 0.1s ease-in-out;
-moz-transition: all 0.35s 0.1s ease-in-out;
transition: all 0.35s 0.1s ease-in-out
}
.ih-item.square.effect7 .info p {
font-style: italic;
font-size: 12px;
position: relative;
color: #bbb;
padding: 20px 20px 20px;
text-align: center;
-webkit-transform: scale(5);
-moz-transform: scale(5);
-ms-transform: scale(5);
-o-transform: scale(5);
transform: scale(5);
-webkit-transition: all 0.35s 0.3s linear;
-moz-transition: all 0.35s 0.3s linear;
transition: all 0.35s 0.3s linear
}
.ih-item.square.effect7 a:hover .img {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2)
}
.ih-item.square.effect7 a:hover .info {
visibility: visible;
opacity: 1
}
.ih-item.square.effect7 a:hover .info h3,
.ih-item.square.effect7 a:hover .info p {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1)
}
<link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="ih-item square colored effect7">
<a href="#">
<div class="img">
<img src="http://gudh.github.io/ihover/dist/images/assets/rect/4.jpg" alt="img">
</div>
<div class="info">
<h3>Electrician</h3>
<p>Need an electrician?<!--click here-->
</p>
</div>
</a>
</div>
</div>
</div>
I have a basic CSS transition where I rotate a pseudo ::after element and increase its width on hover. However the element transition is choppy and skips most of the animation halfway through.
Issue reproduced in a Code Pen.
I've tried using -webkit-backface-visibility: hidden; to solve the issue but I cant seem to stop the transition flash. Any ideas?
Transition css:
a {
position: relative;
text-decoration: none;
color: #db421c;
-webkit-box-shadow: inset 0px 4px 0px #fff;
-moz-box-shadow: inset 0px 4px 0px #fff;
-o-box-shadow: inset 0px 4px 0px #fff;
box-shadow: inset 0px 4px 0px #fff;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
a + a {
margin-left: 20px;
}
a::after{
width: 20px;
height: 1px;
content: " ";
background: black;
position: absolute;
-webkit-transform: rotate(90deg) translate(55%, 10%);
-moz-transform: rotate(90deg) translate(55%, 10%);
-o-transform: rotate(90deg) translate(55%, 10%);
transform: rotate(90deg) translate(55%, 10%);
webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
a:last-child::after {
content: none;
}
a:hover {
color: black;
}
a:hover::after {
width: 100%;
height: 2px;
-webkit-transform: rotate(180deg) translate(100%, -20px);
-moz-transform: rotate(180deg) translate(100%, -20px);
-o-transform: rotate(180deg) translate(100%, -20px);
transform: rotate(180deg) translate(100%, -20px);
}
I isolated the issue to the translate transformation; I wasn't sure how exactly to fix it, although I have a feeling the solution is in the transform-origin property. The only working solution I was able to come up with was to use positioning in order to move the pseudo elements. The same rotation is being used, we are just making use of the absolute positioning in order to translate the elements. This method doesn't have any apparent issues given that the parent element is relatively positioned. This method should also work for elements with varying widths.
UPDATED EXAMPLE HERE - it achives the exact same effect without the choppiness.
Instead of translate(55%, 10%), use top: 10px/right: -22px
And instead of translate(100%, -20px), use top: 22px/right: 0px
Updated CSS
a::after {
width: 20px;
height: 1px;
content: " ";
background: black;
position: absolute;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
top: 10px;
right: -22px;
}
a:hover::after {
width: 100%;
height: 2px;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
top: 22px;
right: 0px;
}