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%);
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.
I'm designing a generator. Today, refactoring code I encountered a problem that I have seen several times in my path, but somehow I never penetrated into its existence. Namely - div after adding the attribute in CSS transform: translateY (-50%) loses on the quality of its elements inside, someone knows why this is happening? Elements are blurry, especially fonts and banners.
I'm using this line to center the diva vertically
If i delete this line, everything back to normal
#message {
width: 500px;
top: 50%;
transform: translateY(-50%);
left: 50%;
margin-left: -250px;
position: fixed;
background: #fff;
z-index: 201;
padding: 20px;
box-sizing: border-box;
}
I would believe that it is because og "half pixels".
You tell the div to transform -50%.
If the div has a height of 101px, the 50% will be 50.5px, and you cant have a half pixel.
You can check if this is the problem, by setting a specific height, that can be split in two, without going into halves.
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
This is my first website I am making for a family friend. I have a series of images on this website (the spots tabs - ie baseball, football, softball etc) with an h1 text that I wanted to be centered vertically and horizontally. It works on my mobile and browser. But my brother told me it ends up not centering on his iphone 6 with safari.
http://www.pennfamous.com/tp/
I am using the following css to center the h1:
.h1format h1 {
color: #FFFFFF;
position: absolute;
top: 40%;
left:50%;
transform: translate(-50%,-50%);
font-size: 2em;
}
However, my brother told me on his iOS it ends up looking like this:
http://prntscr.com/9pdqk0
Is there a simple fix for this? Remember I am a novice. Thank you
For Safari you need the -webkit-prefix. And you might as well add the -ms-prefix to get support in IE9 (even if it's dying).
.h1format h1 {
color: #FFFFFF;
position: absolute;
top: 40%;
left:50%;
-ms-transform: translate(-50%,-50%); /* IE 9 */
-webkit-transform: translate(-50%,-50%); /* Chrome, Safari, Opera */
transform: translate(-50%,-50%);
font-size: 2em;
}
I'm trying to make a friend their portfolio website, and everything is simple enough, but I can't seem to get the sideways navigation to touch the content box. I've got it close, it's perhaps 50 to 75, 100 pixels at most, but they simply won't touch.
This is the code for the two div in question. I was able to twist the navigation with help from someone else's question, but they still won't sit flush. Any help at all would be greatly appreciated, thank you very much for your time.
.background {
background-image: url(textureimg.jpg);
width: 800px;
height: 1000px;
float: left;
}
.navigation {
float: left;
/* Safari */
-webkit-transform: rotate(90deg);
/* Firefox */
-moz-transform: rotate(90deg);
/* IE */
-ms-transform: rotate(90deg);
/* Opera */
-o-transform: rotate(90deg);
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
Probably a margin issue. Try .navigation { margin-right: 0px; }. Unless your navigation is on the right side, then use margin-left. You may also have to adjust the margin of the content section.
All of the "content" in an element takes up only a small part of that element's screen space. The rest is for padding, border, and margin. These can each be adjusted with CSS via padding: 10px;, border: 5in;, margin: 3pt; respectively (obviously you can use whatever size values you want). You can also manipulate individual sides, such as padding-right: 10px; padding-top 5px;
If adjusting the navigation's margin doesn't give the desired result, try adjusting the border and padding as well.
(source: html.net)
There's a good intro to the HTML box model here
#content { position: relative; left: -50px; }
adjust the left to however many pixels you need till it's not too hot or too cold, but just right