For some reason firefox (and firefox alone, this isn't even an issue on ie which is...odd) seems to be ignoring the top:xx% value of a table/table cell element, but only initially, if the value is edited in the console however it immediately works as intended.
.overlay nav {
text-align: center;
position: relative;
display: table-cell;
vertical-align: middle;
top: 50%; /* <---the issue */
height: 100%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%);
}
I've settled the issue for the now by switching to top:xxvh, however I'm curious as to why the precentage isn't working so I'm still asking the question to see if anyone can shed some light on the issue.
Codepen showing example, only occurs in firefox
Related
So I'm having difficulty fixing some pixelation issues on Chrome.
here are some examples:
an image (transform: translate(-50%, -50%); position: fixed;)
some text(transform: translate(-50%, -50%) rotate(180deg) and (transform: translate(-50%, -50%);) are blurry
I've tried
-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0) scale(1.0, 1.0);
and other solutions, but nothing seems to be working.
Anyways, thanks for checking it out and thanks for your help!
This is a common issue with Chrome, you could try hacks but personally I never got it to work, so if I were you I'd build it with another approach.
Blurry text after using CSS transform: scale(); in Chrome for your information.
I suggest you fix the parent instead of the children and use flexbox.
.entry-content .navigation {
position: fixed;
top: 0;
bottom: 0;
right: 30px;
left: 30px;
display: flex;
justify-content: space-between;
align-items: center;
}
And you remove absolute/fixed positionning from the links. It will need fine tuning though. The only drawback is that the element will cover the whole page, so that might not work for you.
After working on a page for some months, I noticed a weird behavior in webkit based browsers. I implemented an input element with a technic I asked here Create quadrilateral with specific degree Everything works fine in all browsers, except webkit.
I search for this exact behavior and tried to find existing workarounds. An example for a suggested fix:
#supports (-webkit-overflow-scrolling: touch) {
transform: translate3d(0, 0, 0);
}
However this doesn't work.
I created a glitch project with the problem: https://glitch.com/~safari-bug-overflow
However, I also created more simple example:
<div>
<div class="wrapper">
<div class="background"></div>
<div class="content">
<h1>
Test
</h1>
<h1>
Test
</h1>
<h1>
Test
</h1>
<h1>Test</h1>
</div>
</div>
</div>
<style>
.background {
position: absolute;
transform: rotateX(58.6297041833deg) rotate(45deg);
background-color: green;
top: 96.619312px;
left: 3.4641016151px;
transform-origin: right top;
border-radius: 100px;
width: 500px;
height: 500px;
}
.wrapper {
position: releative;
}
.content {
position: relative;
}
</style>
This is how it looks in most browsers:
This is how it looks in webkit based browsers
Now I need to find a workaround for the issue, because I don't expect any fix in the near future. I am not even sure, whether this is a bug in webkit or a bug in my css. I think it is webkit, because it works in every other browser.
I found a WebKit Bug Report: https://bugs.webkit.org/show_bug.cgi?id=182520
at first, dont use h1 for those purposes, in terms of search engine optimization that would be a disaster. :)
I think your issue is in the content class. Have tryed min-height?
CSS Code
.content {
min-height:300px; /* for example */
}
Otherwise it would be usefull if u provide an js fiddle or anything :)
I found a solution by myself. One day I thought, maybe webkit uses a different z start position. Then I tried to move the div away. And it worked.
You can apply translateZ first on your transformation to fix the bug:
.background {
position: absolute;
transform: rotateX(58.6297041833deg) rotate(45deg);
-webkit-transform: translateZ(-1000px) rotateX(58.6297041833deg) rotate(45deg);
background-color: green;
top: 96.619312px;
left: 3.4641016151px;
transform-origin: right top;
border-radius: 100px;
width: 500px;
height: 500px;
}
.wrapper {
position: releative;
}
.content {
position: relative;
}
Notice the translateZ(-1000px) on -webkit-transform
I have created an html/javascript/css page which displays photos in a "carousel", where the user can click the left and right arrows to change the photo. The carousel itself, the parent/container, is 500px tall and 100% of its parent div wide. The image inside of it should be at max 100% wide and at max 100% tall. In other words, it will fit itself into the imgCarousel, regardless of aspect ratio.
This works in most browsers. I have confirmed that it works in IE, Edge, Chrome, and Firefox. However, it does not work in Safari. I don't personally have access to a Mac, but I know it does not work in Safari because others have viewed the page before me. It also does not work in some android mobile browsers (though it does work with Android Chrome).
It appears that in these browsers where it does not work, the top is not actually set to 50%, but that the transform is still working properly. This is based on visual inspection. In addition, it appears that the image is not being sized properly. It is extending to the full width, and the height is extending beyond 100%;
Unfortunately, I cannot test with developer tools on any of these browsers, since I don't have access to a Mac, and I can't seem to find developer tools for mobile browsers that can be used in the same capacity.
I can link to the page in question if it is not a breach of protocol here.
I have done some research to see if there are any compatability issues/fixes, but I have not been successful in this research. If anyone knows of any way I can include a compatibility fix, please let me know.
Thank you.
.imgCarousel {
display: flex;
justify-content: space-between;
vertical-align: middle;
height: 500px;
background-color: black;
text-align: center;
margin: auto;
}
.imgCarousel img {
position: relative;
top: 50%;
transform: translateY(-50%);
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
max-height: 100%;
max-width: 100%;
object-fit: contain;
cursor: pointer;
}
Try adding this list, including the opera prefix:
transform: translateY(-50%);
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
I really hope someone can help me with this one.
I have a shape that I'd like to have change background color when hovered over it. I've gotten it to work in all browsers, except Safari.
You can see it here: http://jsfiddle.net/bgLv6L9j/5/
I tried using the following code to make the hover work but it cuts off half the text. I tried adding the dimensions of the shape but that also makes it look wonky.
.shape:hover::before {
background-color: #245a85;
content: "";
position:absolute;
}
I've looked through various other topics with the same issue but can't seem to locate any Safari specific problems (or solutions for that matter).
I'd really appreciate it if someone could quickly take a look and see where I'm going wrong with regard to pseudo elements and getting the background hover to work in Safari.
If you do this:
.shape a {
position: absolute;
}
Instead of relative It seems that will fix the problem.
http://jsfiddle.net/bgLv6L9j/7/
Edit:
I rewrote it with a much simple code based on yours.
HTML
<a class="shape" href="#">Text</a>
CSS
.shape {
border: 2px solid crimson;
border-radius: 5px;
display: table-cell;
text-align: center;
vertical-align: middle;
width: 150px;
height: 75px;
-moz-transform: perspective(40em) rotatex(-45deg);
-ms-transform: perspective(40em) rotatex(-45deg);
-o-transform: perspective(40em) rotatex(-45deg);
-webkit-transform: perspective(40em) rotatex(-45deg);
transform: perspective(40em) rotatex(-45deg);
}
.shape:hover {
background: crimson;
}
That's it. http://jsfiddle.net/8sdqteke/
I am very new to CSS. I have recently created a custom front page of my website, but images are not at aligned to the middle (vertically)
I know it should be very small change but could not figure out how to make this work. Please have a look at my homepage and suggest what should I change.
My homepage here -www.dealschintu.com
What I have already tried:
Tried adding tags
vertical-align: middle;
height: auto;
width: auto;
There are multiple ways of vertically centering elements in css. A quick one that could work (depending on how your document is built up) is the following css snippet:
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
You could also try adding display: table;
To the parent element, and
display: table-cell;
vertical-align: middle;
To the image element.