This question already has answers here:
Incorrect border rendering when using css transform in Firefox
(3 answers)
Closed 4 years ago.
In Firefox, I'm having an issue where the css generated arrow renders the border properties with a cut-through outline at the center point. Is there a fix for this?
It renders perfectly fine in all other modern browsers where the border outline isn't visible and shows a clear arrow.
The bug is only visible in Firefox.
All other browsers (Chrome, Edge, Opera, IE11):
Firefox:
.bx-prev, .bx-next {
border-right: 15px solid green;
border-bottom: 15px solid green;
width: 35px;
height: 35px;
transition: .25s all;
cursor: pointer;
z-index: 10000;
}
.bx-prev {
transform: rotate(135deg);
position: absolute;
top: 120px;
left: 220px;
}
.bx-next {
transform: rotate(-45deg);
position: absolute;
top: 120px;
right: 420px;
}
<a class="bx-prev"></a>
<a class="bx-next"></a>
Use translateZ(1px) with rotate property value
transform:translateZ(1px) rotate(-45deg)
This seems to be, how Firefox is translate the element using the matrix value in transform property.
Another way to solve such things is making a svg element or getting one from fontawesome, download the .svg file. Using https://www.figma.com, to easily manipulate it and voilá.
Related
I am working on a project which has a custom shape background and an image on top of it. Its located on the Hero area of the landing page. I need a good solution so that the custom shape will be in the background. And the user can change the image or the Color if they needed.
Here is a demo of the shape I am talking about. Is there any way I can achieve it using CSS, and the user can change the image or color later? What do you think of a solution here?
Thanks in advance.
This is actually multiple questions.
How can I layer multiple elements over each other.
How can I change the shape of an html element.
The now deleted answer by Alexandre Beaudet, that you said was 'Not really close to what I wanted', actually did answer the second question clearly and briefly. You were too blinded by the details of what you want to see the principle you needed to learn from that answer.
Given how easy these elements are to research, I don't even want to show you example code, but here's one:
.wrapper {
width: 100%;
height: 300px;
background: gray;
position: relative;
}
.background-shape {
background: orange;
width: 100%;
height: 200px;
-ms-transform: skewY(-20deg);
-webkit-transform: skewY(-20deg);
transform: skewY(-20deg);
border-radius: 30px;
position: absolute;
top: 0px;
left: 50px;
}
.content {
color: white;
position: absolute;
top: 120px;
left: 30%;
z-index: 10;
}
<div class="wrapper">
<div class="content">
Lorem Ipsum Hero
</div>
<div class="background-shape">
</div>
</div>
This is EXAMPLE code. SO is not a copy-paste solution site. It is here to teach you specific mechanisms you were heretofore unaware of to solve specific problems. It just so happens that code snippets can be one of the best ways to explain things in a succinct and clear way.
To implement this on your website you will need to put a LOT of work into this to position and shape everything so that it actually looks good on all devices.
I was finally able to solve this problem on the day I posted it on StackOverflow. Thanks to all the guys who have commented. I used a CSS pseudo element to make this shape.
Here is my code.
// Header Shape
.has-header-shape {
position: relative;
&::before {
position: absolute;
width: 1350px;
height: 550px;
content: "";
background: #0cebeb; /* fallback for old browsers */
background: -webkit-linear-gradient(
to right,
#8cbf86,
#66b4a6,
#408ca3
); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(
to right,
#8cbf86,
#66b4a6,
#408ca3
); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
z-index: -1;
top: 0px;
border-radius: 60px;
-webkit-transform: skew(0deg, -15deg);
transform: skew(0deg, -15deg);
left: auto;
right: 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>
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 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'm building a header that can be extended when clicking a button. Then additional content should slide in from behind the original header. Both header are positioned fixed as they should scroll with the page. To smoothly animate the slide in/out I'm using CSS with transition on transform.
This works fine in Chrome and IE but fails in FF. In FF the rendering is odd. It looks like the border is drawn onto the new position immediatly, then the header slides in and the border in then finally corrected to the correct position. Same on sliding out.
This happens in FF 39.0 on Windows 7. The same version but on Kubuntu Linux does not show this behaviour. I experienced this as well when using translate3d or top properties as workaround.
HTML:
<header id="header">This is the header</header>
<div id="slider">
<div>Slider content goes here</div>
<button id="trigger" type="button">Toggle</button>
</div>
CSS:
#header, #slider {
display: block;
position: fixed;
top: 0;
width: 100%;
height: 50px;
border-bottom: 1px solid black;
}
#header {
background-color: red;
z-index: 10;
}
#slider {
background-color: green;
-webkit-transition: -webkit-transform .5s;
-moz-transition: -moz-transform .5s;
transition: transform .5s;
z-index: 9;
}
#slider.opened {
-webkit-transform: translateY(50px);
-moz-transform: translateY(50px);
transform: translateY(50px);
}
#trigger {
position: absolute;
height: 25px;
bottom: -25px;
right: 20px;
}
JS:
var opened = false;
document.getElementById("trigger").onclick = function () {
document.getElementById("slider").className = opened ? "" : "opened";
opened = !opened;
};
JSFiddle: https://jsfiddle.net/avwhksbw/
So, what's going on here? Are you able to reproduce this weird animation rendering on FF? What could I do about this? Using CSS animations? JQuery?
EDIT: Here is a screenshot that shows the problem. This is taken when the slider opens. Looks kind of similar when closing.
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