So i made a simple button with a perspective pseudo element that flips on hover.
This works perfectly well on android and pc, but on iphone/ipad the text is only visible in the upper half.
Also tried adding a span for the text and position it above the stack, same result.
Does anyone know how to fix this?
Couldn't find a similar question on stack so far, but should be fixable i reckon.......
PS: i use scss, so it converts including -webkit and other variants..
This is how it looks on appetize.io (and real iphone):
.btn {
position: relative;
display: inline-block;
cursor: pointer;
padding: 12px 20px;
margin: 10px 10px;
text-decoration: none;
-webkit-perspective: 500px;
perspective: 500px;
color: #fff;
-webkit-transition: all .4s ease-in;
transition: all .4s ease-in;
z-index: 10;
line-height: 20px;
overflow: visible;
}
.btn:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
background-color: #f00;
border-radius: 12px;
left: 0;
-webkit-perspective: 500px;
perspective: 500px;
-webkit-transform: translateY(-50%) rotateX(45deg);
transform: translateY(-50%) rotateX(45deg);
min-height: 20px;
top: 50%;
z-index: -10;
-webkit-transition: all .4s ease-out;
transition: all .4s ease-out
}
.btn:hover:after {
color: #fff;
-webkit-transform: translateY(-50%) rotateX(-135deg);
transform: translateY(-50%) rotateX(-135deg);
background-color: #000
}
<div class="btn">this is unreadable on ios?</div>
Related
I came across a strange issue on Safari. Please take a look at: https://codepen.io/enguerranws/pen/PomzqWe
If you go hover the lightly red box, you'll notice a transition on an element inside.
If you test it in Chrome or Firefox, the animation runs as expected: it's a small black circle that scales up.
On Safari, it goes weird: it's a black square with some kind of transparency that goes round and fully opaque when the transition ends.
Here's the relevant part of code:
#test:hover #circle {
transform: scale(200);
}
#circle {
position: absolute;
transition: -webkit-transform .5s ease-in-out;
transition: transform .5s ease-in-out;
/* transition: all 1s ease; */
width: 2px;
height: 2px;
top: 30px;
border-radius: 10px;
mix-blend-mode: difference;
background-color: #000;
}
Does anyone as quick and dirty hack for this?
EDIT:
Actually, I found a way to get around this issue using width and height values for transform.
Try to use will-change: transform;. Added to your code:
#test {
width: 400px;
height: 400px;
position: relative;
overflow: hidden;
padding: 40% 10px;
background: rgba(255,0,0,.1);
}
#test:hover #circle {
transform: scale(1);
}
#circle {
position: absolute;
transition: transform .5s ease-in-out;
will-change: transform;
transform: scale(.005); /* point */
transform-origin:left top;
width: 2px;
height: 2px;
top: 30px;
border-radius: 400px;
width: 400px;
height: 400px;
background-color: #000;
}
<div id="test">
<div id="circle"></div>
Text here
</div>
The text is properly aligned in Chrome but as it goes in Safari the text messes up its position and touches the top of the container (text container)
Chrome: Chrome view
Safari: Safari view
As you can see in Safari, the text container (span) has its proper size but the text inside is touching the roof. I've tried things to solve this by messing the height, line height, position, etc but still no luck.
The current approach used in the image is I've made the span position absolute and align it in the center and it (span) is in the center but the text is not being aligned vertically. (Also tried the vertical-align property but no luck)
Are there any fix/workarounds for this?
Tech Stack: Gatsby with Tailwind + Modular sass
.linkButton {
padding-right: 30px;
padding-left: 8px;
position: relative;
background-color: rgb(85, 85, 85);
transition: 0.25s all ease-in-out;
display: flex;
line-height: 36px;
width: 180px;
min-height: 35px;
.text {
transition: 0.25s all ease-in-out;
height: 20px;
line-height: 20px;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
&::after {
content: "";
background-color: #fff;
height: 12px;
width: 9px;
position: absolute;
top: 50%;
right: 9px;
transform: translateY(-50%);
clip-path: polygon(0 0, 100% 50%, 0 100%);
transition: 0.25s all ease-in-out;
z-index: 10;
}
&::before {
height: 100%;
width: 100%;
content: "";
position: absolute;
background-image: linear-gradient(to right, #4100a3 0%, #0d52ff 100%);
top: 0px;
left: 0px;
z-index: 5;
opacity: 0;
transition: 0.25s all ease-in-out;
}
&:hover {
width: 185px;
cursor: pointer;
.text {
transform: translate(4%, -50%);
-webkit-transform: translate(4%, -50%);
}
&::after {
transform: scale(1.25) translateY(-40%);
}
&::before {
opacity: 1;
}
}
}
<a href="/features">
<div class="index-module--linkButton--3DaPN mt-3 md:mt-12 mx-auto md:mx-0 flex items-center justify-center text-white">
<span class="index-module--text--QcmPb z-10">View all Features</span>
</div>
</a>
Solved! The issue was with font rendering as it differs between browsers, not some line-height issue...
This resolved my issue: Font Rendering / Line-Height Issue on Mac/PC (outside of element)
I am building a story section for the site. Following is the scss code for a story:
.story{
width: 75%;
background-color: $color-white;
font-size: 1.6rem;
margin: 0 auto;
box-shadow: 0 3rem 6rem rgba(0,0,0,0.2);
border-radius: .1rem;
padding: 4rem;
padding-left: 5.5rem;
transform: skewX(-12deg);
&__shape{
height: 15rem;
width: 15rem;
float: left;
shape-outside: circle(50% at 50% 50%);
clip-path: circle(50% at 50% 50%);
transform: translateX(-1.5rem) skewX(12deg);
position: relative;
}
&__img{
height: 100%;
transform: translateX(-4rem) scale(1.4);
backface-visibility: hidden;
transition: all .5s;
}
&__text{
transform: skewX(12deg);
}
&__caption{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,20%);
font-size: 1.7rem;
text-transform: uppercase;
color: $color-white;
text-align: center;
opacity: 0;
transition: all .5s;
backface-visibility: hidden;
}
&:hover &__caption{
transform: translate(-50%,-50%);
opacity: 1;
}
&:hover &__img{
transform: translateX(-4rem) scale(1);
filter: blur(3px) brightness(80%);
}
}
When I hover a vertical line appears on the right of image and goes away when unhovered. Following are the images of problem.
Without hover:
With hover:
This problem only appears on chrome and not on Mozilla Firefox.
It is common filter: blur(); and clip-path problem. You shape is a circle, so there is a border-radius solution.
Try to add to the image parent element:
&__shape{
/* add */
border-radius: 100%; /* will do the same circle form = your clip-path */
overflow: hidden; /* will hide everything outside the form, including your line */
}
overflow: hidden; + border-radius: 100%; on the parent element will hide that bug.
I am having a problem getting a underline bar to animate under a text link. You can see a working example here: http://tobiasahlin.com/blog/css-trick-animating-link-underlines/
The animation works fine in all browsers except for Safari 5.1.7. What am I doing wrong? Here is my code snippet:
EDIT: Sorry about that, I added the html and more of the CSS rules. I hope that helps.
.infiniteNav{
width: 100%;
height: 56px;
background-color: #9e0707;
background: linear-gradient(#c71e1e, #800909);
background: -webkit-linear-gradient(#c71e1e, #800909);
position: absolute;
top: 271px;
z-index: -2;
}
nav{
width: 955px;
height: 56px;
float: left;
text-align: center;
display: block;
background-color: #9e0707;
background: linear-gradient( #c71e1e, #800909);
background: -webkit-linear-gradient(#c71e1e, #800909);
}
nav a{
position: relative;
font-size: 25px;
font-family: arial;
color: #e0e0e0;
text-decoration: none;
font-weight: bold;
margin: 0px 15px;
line-height: 55px;
}
/********************************************************************************************************
This is the animated underline bar. *
********************************************************************************************************/
nav a:before{
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #e0e0e0;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
/*-webkit-transition: all 0.3s ease-in-out 0s;*/
-webkit-transition-property: all;
-webkit-transition-duration: 0.3s;
-webkit-transition-timing-function: ease-in-out;
-webkit-transition-delay: 0s;
transition: all 0.3s ease-in-out 0s;
}
nav a:hover:before{
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
color: #e0e0e0;
}
nav a:active{
color: #e0e0e0;
}
<nav>
Home
Shop
Sales
Catalog
Events
Contact
About us
Partners
</nav>
I've created a plus sign (+) with CSS using the :after pseudo element. When the containing element is clicked, I'm rotating (with a transform) the plus sign (+) 45 degrees to make an (x). When the containing element is clicked again, the (x) returns back to (+).
This works as expected, but it appears the position of the horizontal line that makes the (+) moves slightly down and the width gets smaller after the transform has completed.
It looks like this is only happening in Firefox.
I've created a fiddle to show what I mean.
Here is the code for reference:
$('#MobileProx').click(function() {
$('#MobileProx .RotateXWrap').toggleClass('Active');
return false;
});
#MobileProx {
position: relative;
top: 50px;
height: 20px;
display: block;
text-align: left;
padding: 2%;
color: #fff;
font-size: 1.5em;
background: #0099a8;
cursor: pointer;
}
#MobileProx .RotateXWrap {
transition: all 0.35s ease-in-out 0s;
-moz-transition: all .35s ease-in-out 0s;
-ms-transition: all .35s ease-in-out 0s;
-o-transition: all .35s ease-in-out 0s;
-webkit-transition: all .35s ease-in-out 0s;
}
#MobileProx .RotateXWrap {
float: right;
margin-right: 1%;
width: 20px;
height: 20px;
}
#MobileProx .RotateXWrap.Active {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#MobileProx .RotateX {
margin-left: 9px;
background: white;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
height: 20px;
position: absolute;
width: 3px;
}
#MobileProx .RotateX:after {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background: white;
content: "";
height: 3px;
left: -9px;
position: absolute;
top: 8.5px;
width: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="MobileProx">Click here
<div class="RotateXWrap">
<span class="RotateX"></span>
</div>
</div>
Any suggestions?