I'm running into this anti-aliasing Chrome bug that I can't seem to work out.
I have two types of containers being rotated with the transform property. Type A has a solid color background. Type B has an image background with a background-attachment:fixed property to force it to line up with the background image of the container it's on top of.
Both types rendered a jagged edge in Chrome after being rotated. The jagged edge on type A was solved with -webkit-backface-visibilty: hidden;, so I don't need any help on that one. However, I had no such luck with that trick on container Type B. Using that class broke the background image and fixed image 'parallax' functionality.
I've tried just about every remedy I can find on various forums and keep striking out. Anybody have any ideas as to how to clean this up? Example below, easiest to see on the bottom edge of the image container in Chrome (I'm in version 44.0.2403.130 (64-bit))!
HTML
<div class="spacer"></div>
<div class="content">
<div class="back" style="background-image:url('https://cbshouston.files.wordpress.com/2013/03/137153916-1.jpg');">
<div class="bottom-divider"></div>
</div>
</div>
<div class="spacer"></div>
CSS
body {
margin: 0;
padding: 0;
}
.content {
position: relative;
margin-bottom: 250px;
z-index: 9999;
}
.back {
min-height: 500px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
z-index: -1;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
}
.spacer {
height: 200px;
background-color:#191919;
position: relative;
z-index:9;
}
.bottom-divider::before {
background-image: url('https://cbshouston.files.wordpress.com/2013/03/137153916-1.jpg');
background-position: center center;
background-size: cover;
background-attachment: fixed;
content:" ";
position: absolute;
width: 200%;
height: 200%;
top: -50%;
left: -50%;
z-index: -1;
-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
-ms-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
transform: rotate(-2deg);
}
.bottom-divider {
bottom: -50px;
margin-top: -63px;
transform: rotate(2deg);
-webkit-transform:rotate(2deg);
z-index: 99;
margin-left: 0;
width: 110%;
position: absolute;
bottom: -57px;
overflow: hidden;
height: 77px;
}
https://jsfiddle.net/raf8mb04/
Use -webkit-backface-visibility: hidden;
DEMO
Related
Is it possible to do free transforms of an element using CSS - similar to a mesh transform?
The closest I can get to this is using something like transform: perspective(400px) rotateY(45deg); with three elements, but I would like it to be one continuous img element.
You can consider 3 elements and background-image. The trick is to adjust the background-size/background-position to create the illusion of one continuous image.
Hover to see the result:
.box {
margin: 50px auto;
width: 200px;
height: 200px;;
background-size: 300% auto;
background-position: center;
position: relative;
}
.box:before,
.box:after {
content: "";
position: absolute;
width: 100%;
top: 0;
bottom: 0;
background-image: inherit;
background-size: 300% auto;
transform: perspective(800px);
transition: 0.5s all;
}
.box:before {
right: 100%;
background-position: left;
transform-origin: right;
}
.box:after {
left: 100%;
background-position: right;
transform-origin: left;
}
.box:hover::before {
transform: perspective(800px) rotateY(50deg);
filter: brightness(0.8);
}
.box:hover::after {
transform: perspective(800px) rotateY(-50deg);
filter: brightness(0.8);
}
<div class="box" style="background-image: url(https://picsum.photos/id/1/1000/800)">
</div>
This may not be the best place to ask this, I am trying to get a full width parallax with the height of 550px....my question is what should the dimensions of the image be? Below is my CSS code
element.style {
background-image: url(home-1-1.jpg);
min-height: 550px;
height: 550px;
position: relative;
left: 15px;
box-sizing: border-box;
width: 1472px;
}
.eltdf-parallax-row-holder {
position: static;
padding: 0;
background-attachment: fixed;
background-color: transparent;
background-position: center 0;
background-repeat: no-repeat;
overflow: hidden;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
transform: translateZ(0);
-moz-transform: none;
}
The size of home-1-1.jpg is 2000x542 and when applied to the parallax it looks super zoomed in. What can I do to make it look better?
Is it possible to have a div with a background image which has a skewed bottom AND round corners?
Most examples use only a background color which doesn't have the duplicate image problem that a background image has.
CSS clipping path
The clipping path option works however, it has no support on IE 11.
Closest solution so far
The HTML:
<div class="container">
<div id="parallelogram">
<div class="image"></div>
</div>
</div>
The CSS:
.container {
overflow: hidden;
padding-bottom: 40px;
}
#parallelogram {
width: 300px;
height: 150px;
margin: -41px 0 0 0;
-webkit-transform: skewY(-11deg);
-moz-transform: skewY(-11deg);
-o-transform: skewY(-11deg);
background: red;
overflow: hidden;
position: relative;
border-radius: 40px;
}
.image {
background: url(http://baconmockup.com/340/500);
position: absolute;
top: -30px;
left: -30px;
right: -30px;
bottom: -30px;
-webkit-transform: skewY(11deg);
-moz-transform: skewY(11deg);
-o-transform: skewY(11deg);
}
https://jsfiddle.net/Spindle/81e30bmx/
But the problem with this is that the round corners aren't visible anymore as well...
Adding border-radius to parent div could work, as it will work as border-radius for four corner and then individually using border-top-right-radius, border-top-left-radius,border-bottom-right-radius,border-bottom-left-radius you can change and align accordingly as below and thus it skews at bottom-left along-with border-radius at 4 sides,
.container {
overflow: hidden;
padding-bottom: 40px;
border-top-right-radius:16px;
border-bottom-right-radius:14px;
border-top-left-radius:40px;
margin-top:40px;
display:inline-block;
}
#parallelogram {
width: 300px;
height: 150px;
margin: -41px 0 0 0;
-webkit-transform: skewY(-11deg);
-moz-transform: skewY(-11deg);
-o-transform: skewY(-11deg);
background: red;
overflow: hidden;
position: relative;
border-radius: 40px;
}
.image {
background: url(http://baconmockup.com/340/500);
position: absolute;
top: -30px;
left: -30px;
right: -30px;
bottom: -30px;
-webkit-transform: skewY(11deg);
-moz-transform: skewY(11deg);
-o-transform: skewY(11deg);
}
<div class="container">
<div id="parallelogram">
<div class="image"></div>
</div>
</div>
It is possible and does seems to work on your example.
If you are talking about the top left and right corners getting chopped off, then what you need to do is add a margin to the top so:
#parallelogram { margin: -41px 0 0 0; }
Would become:
#parallelogram { margin: 23px 0 0 0; }
This will adds the hole shape in.
I would like to keep this shape so it is responsive and keeps the same direction, and that it can still scroll down the page. The problem is that because of its size it scrolls left and right, which I wish to avoid.
If I set overflow: hidden; to its parent element (body), it causes all other content to vanish in the bottom when it reaches it.
Is there a way to prevent the page to scroll left and right, to "cut" the extra part? Thank you
Here's the fiddle: https://jsfiddle.net/oytvt0p7/
#angled-shape {
width: 3000px;
height: 800px;
background-color: lightgrey;
margin-top: 50px;
margin-left: -1000px;
position: absolute;
z-index: -1;
overflow: hidden;
-ms-transform: rotate(-30deg); /* IE 9 */
-webkit-transform: rotate(-30deg); /* Safari */
transform: rotate(-30deg); /* Standard syntax */
}
<div id="angled-shape"></div>
You can just set overflow-x: hidden;, so scrolling in y direction will be nevertheless possible:
body {
overflow-x: hidden;
}
#angled-shape {
width: 3000px;
height: 800px;
background-color: lightgrey;
margin-top: 50px;
margin-left: -1000px;
position: absolute;
z-index: -1;
overflow: hidden;
-ms-transform: rotate(-30deg);
/* IE 9 */
-webkit-transform: rotate(-30deg);
/* Safari */
transform: rotate(-30deg);
/* Standard syntax */
}
<div id="angled-shape"></div>
Try bellow CSS
position: fixed;
overflow-y: scroll;
top: 0; right: 0; bottom: 0; left: 0;
Background video out of position in Safari only. When I remove "top: 50%" and "left: 50%" it works on Safari but position then becomes out of place in Chrome, etc. Anyone got any ideas on how to get it working on both?
video {
background-repeat: no-repeat;
background-position: left top;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
transform: translateX(-50%) translateY(-50%);
background: url(../images/vidstill.png) no-repeat;
background-size: cover;
transition: 1s opacity;
}
I was having the same issue. For Safari to recognize the "transform: translateX(-50%) translateY(-50%);" you need to add another line: "-webkit-transform: translateX(-50%) translateY(-50%);"
Adding the "-webkit" will help Safari understand what you want. So it will end up looking like this:
video {
background-repeat: no-repeat;
background-position: left top;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
background: url(../images/vidstill.png) no-repeat;
background-size: cover;
transition: 1s opacity;
}