I have a popup to which I apply these properties:
position: absolute;
top: 50%;
left: 50%;
width: 80%;
max-width: 700px;
height: 80%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
While this works perfectly on Chrome, I get a strange issue on Safari. Basically as soon as the popup changes size the rendering/graphics of the element move away from its real position. Here's a photo that might help understand better this weird behaviour.
So the popup is perfectly centered, as well as all its child elements, but the render/graphics are somehow translated. For instance, if I want to click on the X to close the popup I have to click on the "supposed" position (the one highlighted in blue in the picture) and not the "visible/rendered" one.
Is there any solution to this issue?
You can set content in a <center></center> or add attribute like this:
div.popup.project.dark{
text-align: center;
}
Related
I am fiddling around with making a parallax website, have been following the steps from Keith Clark to slowly get to know parallax. However, I stumble upon an issue that looks like a Firefox issue? On load, the first layer and the darkseagreen background layer are cut in half. If I change the translateZ property from -1px to 0, everything is loaded correctly but then the parallax effect isn't working anymore.
If I scroll down or adjust the size of my browser, the rest is visible, but I would like to have it visible on the initial load.
Link to codepen I'm using Firefox 80.0.
.parallax {
perspective: 1px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
}
.parallax__layer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 100vh 0;
width: 100%;
}
.parallax__layer--base {
transform: translateZ(0);
}
.parallax__layer--back {
transform: translateZ(-1px);
background-color: darkseagreen;
width: 100%;
}
.title {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: #fff;
text-align: center;
}
In my case it was an inherited 'overflow: hidden' that clipped the content in FireFox unnecessarily.
Reading through the original docs I found:
One important rule to keep in mind when grouping elements is, we
cannot clip the content of a group. Setting overflow: hidden on a
parallax__group will break the parallax effect. Unclipped content will
result in descendant elements overflowing, so we need to be creative
with the z-index values of the groups to ensure content is correctly
revealed/hidden as the visitor scrolls through the document.
With this you have to deal with the z-index cleverly, which is kind of an issue in my approach, but I can handle it.
In particular by using intersection observers. Once a certain intersection is reached the z-index is flipped. This makes the entire code more complex, which is what I'm afraid of, but it seems to work.
I revamped the UI of my page, such that there's an image and a floating div on the centre of the image.
The div has the button that opens the modal (Bootstrap 3.3.7).
When I click the button everything appears greyed out, and the modal opens but inside the div and can neither be seen full or closed.
Here are screenshots of the same ( can't include full page because of privacy and security issues)
Here is the CSS for the div:
.card {
/* For Shadow Effect*/
box-shadow: 0 16px 32px 0 rgba(0,0,0,0.9);
transition: 0.3s;
/* Diemensions */
padding: 5px;
width: 400px;
height: 159px;
text-align: center;
border-radius: 1rem;
/*making it stick to the centre*/
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* randome stuff*/
background: #CFD8DC;
margin: auto;
}
You have to set the z-index property of your .card class to a value greater than the overlapping black translucent element.
To do a deeper analysis, open the web inspector to dig into your HTML structure and find the overlapping element I mentioned above. Then, in style properties (should be on the right), find the z-index property. If you cannot find it, check through its parent elements. If you cannot still find it, you should be able to set an arbitrary value, greater than zero, which should make your page look as you want.
Keep in mind that z-index works only if position attribute is set to absolute or relative or fixed.
Is it possible to cut a triangle from a <div> like in the picture below?
The background is actually not just colour, but in my case is a blurred picture, so I can’t simply cover the green <div> with a brown triangle image. Is there some other CSS way to achieve this effect? Thanks.
The illusion of it is possible: http://jsfiddle.net/2hCrw/4/
Tested with: IE 9, 10, Firefox, Chrome, Safari on PC and iPad.
::before and ::after pseudo elements are skewed to provide a side of the triangle each.
Wrapper used for clipping skewed pseudo elements. You may be able to avoid this by using your outer container as the wrapper.
Elements can still be styled with borders, shadows, etc.
Anything underneath will show through properly.
Demo with borders and drop shadow: http://jsfiddle.net/2hCrw/8/
This demo also adds a tweak for iPad with Retina to prevent a gap between the element and the pseudo elements (either caused by drop shadow bleed or sub-pixel rendering behavior).
<div id="wrapper">
<div id="test">test</div>
</div>
#wrapper {
overflow: hidden;
height: 116px;
}
#test {
height: 100px;
background-color: #ccc;
position: relative;
}
#test::before {
content:"";
position: absolute;
left: -8px;
width: 50%;
height: 16px;
top: 100px;
background-color: #ccc;
-webkit-transform: skew(-40deg);
-moz-transform: skew(-40deg);
-o-transform: skew(-40deg);
-ms-transform: skew(-40deg);
transform: skew(-40deg);
}
#test::after {
content:"";
position: absolute;
right: -8px;
width: 50%;
height: 16px;
top: 100px;
background-color: #ccc;
-webkit-transform: skew(40deg);
-moz-transform: skew(40deg);
-o-transform: skew(40deg);
-ms-transform: skew(40deg);
transform: skew(40deg);
}
As an alternative, you can use a transparent image and "extend" the element above it with pseudo elements. I have answered a similar question regarding a circle cut from an element and show support options down to IE7 (as well as future options for true clipping/masking in CSS).
You can do something like this with CSS masks (examples):
http://codepen.io/anon/pen/vgbEH (anti-triangle mask)
http://codepen.io/anon/pen/pEufn (triangle mask)
I used clip-path: polygon(…) property but only my Chrome seems to support it; you could instead create polygon images and reference them with mask-image for broader support.
It isn't possible to cut from divs in css, but it is possible to use an image overlaying the div to make it look like it has been cut.
.triangle{
background-image: url('cut.png');
width: 24px; height: 24px;
z-index: 1;
position: absolute; top: 32px; left: 15px;
}
It looks like there’s a bit of a drop shadow on your <div> as well, which I’m guessing the triangle should respect.
CSS doesn’t currently provide a way to achieve this directly. One approach would be to create an image of the green bottom area of the <div> with the triangle cut-out in it (using e.g. Photoshop), set it as the background of a <div> inside your original <div>, and position it outside of your original <div>.
Here’s a JS Fiddle example that hopefully explains the idea:
http://jsfiddle.net/7y6nz/
Well, that's it. I have some pop ups in my website, and I want them centered in the div that contains it. As I said before, the pop ups' height is set in auto; because each one has a different contain...
Can you help me?
I got it, thanks anyways. I hope this information could help someone else
.centered {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
The problem example can be seen here http://codepen.io/anon/pen/EDgiz.
As you can see, a square(1:1) proportion element is positioned perfectly fine. But two others - not.
Is there a pure CSS solution for such cases?
If not, what can you propose as gentle solution? Because I actually can position those with javascript manually, but i think that's more or less - dirty solution.
Just found a very delicate solution here: http://www.paulund.co.uk/absolute-center-images-with-css, using transform: translate() function
So my final example looks like this - http://codepen.io/anon/pen/EDgiz:
img{
position: absolute;
max-width: 100%;
max-height: 100%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
}
Works Awesome for me