This appears to effect only Safari browsers, but all versions I have tested on.
For some reason when rotating an element on the Y-axis, when it is positioned on top of a fixed container, the element cuts through it. Like this;
.fixed-container {
position: fixed;
z-index: 0;
background: skyblue;
top: 0;
right: 0;
left: 0;
height: 400px;
}
.transformed-element {
z-index: 2;
position: absolute;
background-size: contain;
-webkit-transform: perspective(600px) rotateZ(-64deg) rotateX(10deg) rotateY(50deg);
transform: perspective(600px) rotateZ(-64deg) rotateX(17deg) rotateY(50deg);
height: 400px;
width: 600px;
background: url(http://scalabilitysolved.com/content/images/2014/May/stackoverflow.png) no-repeat center center;
}
Here is the jsfiddle of the above code.
Is this intended behaviour or a browser bug? How can I achieve what I want on top a fixed container?
Related
On some devices screens (laptop), I noticed on Chrome and Microsoft Edge browsers, there is line above my backgroungd svg image, on my top menu.
It looks fine if i resize the window, for example it looks good on mobile size screen. If i change the backround height seems to be solved but it will occur on other screen sizes.
#site-nav::after {
content: '';
display: block;
position: relative;
width: 100%;
height: 99px;
top: 0;
left: 0;
z-index: -1;
background-position-y: 2px;
background-size: 100% 75px;
background-repeat: no-repeat;
background-color: transparent;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDVVBJRE9OIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDIwMDAgMjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyMDAwIDI1MCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KICAgIC5tYWlue2ZpbGw6IzIyMmYzNTt9CiAgICAuc2Vje2ZpbGw6I2M5ZTZmZjt9CiAgPC9zdHlsZT4KICA8Zz4KICAgIDxwYXRoIGNsYXNzPSJzZWMiIGQ9Ik0wLDEzNi4yYzEwOS43LDE0LjEsMjU5LjcsMjIuNiw0MDMuOCwyMS42YzM0MC4xLDAsNTA4LjItNTcuNiw2MTAuNS04My40QzExMDQuMSw1Ni4zLDEyNTAuNSwwLDE2NTMuNiwwYzEyOSwwLDI0Ny4zLDUuNiwzNDYuNCwxNS4zVjI1MEgwVjE1NC4yeiIvPgogICAgPHBhdGggY2xhc3M9Im1haW4iIGQ9Ik0wLDE1NC4yYzEwOS43LDE0LjEsMjU0LjcsMjIuNiw0MTMuOCwyMi42YzM0Mi4xLDAsNTA4LjItNTcuNiw2MjAuNS04OC40QzExNTEuMSw1Ni4zLDEzMTEuNSwwLDE2NTMuNiwwYzEyOSwwLDI0Ny4zLDUuNiwzNDYuNCwxNS4zVjI1MEgwVjE1NC4yeiIvPgogIDwvZz4KPC9zdmc+);
transform: scale(-1,-1.4);
}
I add a printscreen of the error here
On firefox, it seems to be fine.
I wonder if the top line is not a part of the svg image. Unfortunatelly I am not a svg expert.
Thank you for help.
Try removing background-position-y from your css. So that the new CSS looks like this.
#site-nav::after {
content: '';
display: block;
position: relative;
width: 100%;
height: 99px;
top: 0;
left: 0;
z-index: -1;
background-size: 100% 75px;
background-repeat: no-repeat;
background-color: transparent;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDVVBJRE9OIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDIwMDAgMjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyMDAwIDI1MCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KICAgIC5tYWlue2ZpbGw6IzIyMmYzNTt9CiAgICAuc2Vje2ZpbGw6I2M5ZTZmZjt9CiAgPC9zdHlsZT4KICA8Zz4KICAgIDxwYXRoIGNsYXNzPSJzZWMiIGQ9Ik0wLDEzNi4yYzEwOS43LDE0LjEsMjU5LjcsMjIuNiw0MDMuOCwyMS42YzM0MC4xLDAsNTA4LjItNTcuNiw2MTAuNS04My40QzExMDQuMSw1Ni4zLDEyNTAuNSwwLDE2NTMuNiwwYzEyOSwwLDI0Ny4zLDUuNiwzNDYuNCwxNS4zVjI1MEgwVjE1NC4yeiIvPgogICAgPHBhdGggY2xhc3M9Im1haW4iIGQ9Ik0wLDE1NC4yYzEwOS43LDE0LjEsMjU0LjcsMjIuNiw0MTMuOCwyMi42YzM0Mi4xLDAsNTA4LjItNTcuNiw2MjAuNS04OC40QzExNTEuMSw1Ni4zLDEzMTEuNSwwLDE2NTMuNiwwYzEyOSwwLDI0Ny4zLDUuNiwzNDYuNCwxNS4zVjI1MEgwVjE1NC4yeiIvPgogIDwvZz4KPC9zdmc+);
transform: scale(-1,-1.4);
}
When setting a background gradient to background-attachment: fixed it is suddenly cropped to 50% of the page width. It seems related to the position left: 50%. I wonder if this is a bug or if I'm using the CSS wrong here:
.container {
position: relative;
height: 80px;
margin: 10px 0
}
.container:before {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 100vw;
background: #f0f0f0;
background-image: repeating-linear-gradient(315deg,rgba(0,0,0,.03),rgba(0,0,0,.03) 10px,rgba(0,0,0,.06) 0,rgba(0,0,0,.06) 20px);
left: 50%;
transform: translate(-50%);
}
.container.fixed-bg:before {
background-attachment: fixed; /* <-- This line causes the problem. Why? */
}
<div class="container">...</div>
<div class="container fixed-bg">...</div>
I know that I can bypass the issue by removing the styles left: 50%; and transform: ... but that's not a practical solution in my case. The container has an unknown left margin and the pattern needs to reach from edge to edge.
Does that mean my CSS is wrong? What CSS would display the fixed background pattern in full width?
Update
I notice that there is a different behavior across browsers:
The bug seems to be related to transform. Use margin instead
.container {
position: relative;
height: 80px;
margin: 10px 0
}
.container:before{
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 100vw;
background: #f0f0f0;
background-image: repeating-linear-gradient(315deg,rgba(0,0,0,.03),rgba(0,0,0,.03) 10px,rgba(0,0,0,.06) 0,rgba(0,0,0,.06) 20px);
left: 50%;
margin-left:-50vw;
}
.container.fixed-bg:before{
background-attachment: fixed;
}
<div class="container">...</div>
<div class="container fixed-bg">...</div>
body {
height: 150vh;
}
#hero {
position: relative;
border: none;
height: 100vh;
}
#hero .hero-image {
background-image: url(https://images.unsplash.com/photo-1518791841217-8f162f1e1131);
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: 95%;
}
#hero .hero-image:after {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: rgba(0,0,0,0.2);
}
#hero .skewhero-mask {
height: 100%;
position: absolute;
top: 0;
left: 10vw;
width: 45vw;
overflow: hidden;
transform: skew(24deg) translateX(0vh) translateY(0%);
}
#hero .skewhero-parallax {
transform: translateX(0vh);
width: 200%;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
#hero .skewhero-image {
background-image: url(https://images.unsplash.com/photo-1518791841217-8f162f1e1131);
height: 100%;
background-size: 110% auto;
background-attachment: fixed;
transform-origin: right top;
transform: skew(-24deg);
}
<section id="hero">
<div class="hero-image">
</div>
<div class="skewhero-mask">
<div class="skewhero-parallax">
<div class="skewhero-image"></div>
</div>
</div>
</section>
I am really stuck with this one. I'm designing a parallax effect where I shift the background-position property of a fixed background using jQuery. The jQuery isn't at fault here, so I won't include it here to reduce the complexity of the question.
In Chrome, I get the desired effect. In Firefox or Edge, it's a nightmare. I have not tested it on Opera as of yet. When removing the background-attachment: fixed from the class .skewhero-image in those browsers, I notice there's no difference whatsoever. The property doesn't do anything, because when I remove the same property in Chrome, I get the same undesirable result as in the other browsers.
How can I change my code as to achieve the exact same effect as I have now in Chrome, but in all other desktop browsers as well? Mobile browsers excluded.
Basically, the image of the cat must not move, only the container surrounding it. In Chrome, this works as intended. In Firefox or Edge, the cat moves with the container, it isn't fixed to the viewport.
Edit: I have found out that leaving out all transform properties, from itself and all parents, fixes the image to the viewport. Anything to remedy this?
I am not sure what version of Firefox you are using but I just created codepen and it is working fine
<https://codepen.io/anon/pen/ZgpgZP>
If you are still have problem, please describe in details
$(function() {
"use strict";
var $skp = $('.skewhero-parallax');
var $skm = $('.skewhero-mask');
var $hi = $('.hero-image');
function calcParallax() {
var $scroll = $(document).scrollTop();
$skm.css({'transform':'skew(24deg) translateX(-' + (0.445 * $scroll) + 'px)'});
$skp.css({'transform':'translateY(' + $scroll + 'px)'});
$hi.css({'transform':'translateY(' + $scroll + 'px)'});
}
$(window).on('scroll', function () {
calcParallax();
});
$(window).resize(function() {
calcParallax();
});
});
body {
height: 150vh;
}
#hero {
position: relative;
border: none;
height: 100vh;
}
#hero .hero-container {
height: 95%;
overflow: hidden;
}
#hero .hero-container:after {
content: "";
position: absolute;
background: rgba(0,0,0,0.2);
height: 95%;
top: 0;
left: 0;
right: 0;
}
#hero .hero-image {
height: 100%;
background-image: url(https://images.unsplash.com/photo-1518791841217-8f162f1e1131);
background-repeat: no-repeat;
background-size: cover;
will-change: transform;
}
#hero .skewhero-mask {
height: 100%;
position: absolute;
top: 0;
left: 10vh;
width: 45vw;
overflow: hidden;
transform: skew(24deg) translateX(0vh);
will-change: transform;
}
#hero .skewhero-parallax {
width: 200%;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
transform: translateY(0px);
will-change: transform;
}
#hero .skewhero-image {
background-image: url(https://images.unsplash.com/photo-1518791841217-8f162f1e1131);
background-repeat: no-repeat;
height: 100%;
background-size: 110% auto;
background-position: 0px -35px;
transform-origin: right top;
transform: skew(-24deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="hero">
<div class="hero-container">
<div class="hero-image"></div>
</div>
<div class="skewhero-mask">
<div class="skewhero-parallax">
<div class="skewhero-image"></div>
</div>
</div>
</section>
I have found an alternative solution to fix my problem. Also, it seems browsers are able to deal with this solution a lot better. background-attachment:fixed is causing serious performance issues. This is because the browsers have to repaint the entire image when scrolled. Source #1 and Source #2. I have tested this myself and can confirm there's heavy lag when scrolling. I have started using the transform: translate() property, which is a lot more optimized for this as browsers don't have to repaint the entire image.
As I want to animate my parallax effect with jQuery, I've mimicked the fixed background effect in my code. I have added a code snippet of the desired effect, which works in Chrome, Firefox and Edge.
I currently have this code:
body {
margin: 0;
font-family: BlinkMacSystemFont,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
background: #151626;
width: 100vw;
height: 100vh;
}
.bg {
margin: 0;
overflow: hidden;
position: fixed;
height: 100vh;
top: 0;
bottom: 0;
}
.bg figure {
background: url(http://mortenhjort.dk/food/assets/img/login/bg.jpg) no-repeat center center;
background-size: cover;
height: 100vh;
width: 100vw;
transform: scale(1.05);
filter: blur(10px);
opacity: 0.5;
}
<div class="bg"><figure></figure></div>
The image is used as a sitewide background-image for a new platform and the reason for not just putting it into the body as a background-image is that I want to be able to use the CSS3 Filter (blur) on it + opacity, which for both I plan to animate in certain sections of the site.
However if I do this I have to use absolute positioning for all other content on the site which is kinda messy. Is there a better way to insert this image as a background without using absolute positioning?
I strongly prefer a CSS3-only solution.
Add the image using pseudo element, like this, and you can have other content floating on top.
If you get issues with the z-index: -1;, which keep the image to stay in the background, you can remove it and give immediate children of the body position: relative instead.
body {
margin: 0;
font-family: BlinkMacSystemFont,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
background: #151626;
height: 100vh;
}
body::before {
content: '';
position: fixed;
height: 100%;
width: 100%;
background: url(http://mortenhjort.dk/food/assets/img/login/bg.jpg) no-repeat center center;
background-size: cover;
transform: scale(1.05);
filter: blur(10px);
opacity: 0.5;
z-index: -1;
}
div {
color: white;
font-size: 30px;
}
<div>Hey there....</div>
I want to create effect of page corner cliping like in turn.js, I know that I need two divs the outside one need to have positive rotation and inside one need the same amount but negative, and both need translate, but I don't know how to calculate the right values.
How can I do this for each corner?
Here is my try.
Here is my try, for a cut-off of 20px:
.page-wrapper {
position: absolute;
overflow: hidden;
width: 400px;
height: 300px;
top: 50px;
left: 50px;
right: auto;
z-index: 12;
background-color: blue;
}
.outter-wrapper {
position: absolute;
overflow: hidden;
-webkit-transform-origin: 100% 50%;
-webkit-transform: translateX(-20px) rotate(45deg);
right: 0px;
bottom: -100%;
width: 200%;
height: 200%;
}
.inner-wrapper {
-webkit-transform-origin: 100% 100%;
-webkit-transform: rotate(-45deg) translateX(20px);
background-color: yellow;
width: 50%;
height: 50%;
right: 0px;
position: absolute;
top: 0px;
}
You need to make the outter wrapper bigger than the inner wrapper; if not you are clipping in places that you didn't intended. I have done it 20%%; this way the math is easier.
Also, you need to adjust it carefully so that you still know the coordinates of the transform origin.
And you don't really need to move it in x and y, it's enough to mevo it horizontally.
demo