I've come across an issue in the latest version of Chrome (Version 60.0.3112.78) when having a child element of an absolutely positioned parent element being positioned fixed (along with some other CSS attributes).
Here's a CodePen to demonstrate the behaviour: https://codepen.io/anon/pen/GvJeGL
<div class="outer">
<div class="inner"></div>
</div>
.outer {
position: absolute;
left: calc(50% - 100px);
top: calc(50% - 100px);
z-index: 1; /* auto fixes rendering */
border-radius: 5px; /* 0 fixes rendering, other values give strange results */
overflow: hidden; /* visible fixes rendering */
width: 100px;
height: 100px;
}
.inner {
position: fixed;
width: 80%;
height: 75%;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background: salmon;
}
This issuse appeared when I updated Chrome to major version 60 (it works in 59). Safari also seem to have issues.
If you play with the CSS values in the Codepen of the ".outer" element you will notice that the rendering behaviour changes. Interesting that border-radius has an effect.
Is this a bug or can anyone explain this behaviour?
Related
In the following html example the blue box disappears when the chrome window height is dragged above 1200px. (simplified example)
<html>
<head>
<style type="text/css">
.red_box {
position: fixed;
right: calc(-50vh + 1em);
width: 100vh;
top: calc(50vh - 1.2em);
height: 4.9em;
transform-origin: top;
transform: rotate(-90deg);
background-color: red;
will-change: transform;
}
.blue_box {
width: 60vh;
background: blue;
height: 2em;
}
</style>
</head>
<body>
<div class="red_box">
<div class="blue_box">
</div>
</div>
</body>
</html>
Already filed a bug in the chromium project: https://bugs.chromium.org/p/chromium/issues/detail?id=935452
I assume that it is a corner case? And will take some time until this will be fixed. Does anyone know a workaround?
we need the parent element(red box) to be rotated and near the left or right corner of the window
Update: in our real application the red_box is always a new layer(browser composite process), so we need the css will-change: transform; to force a new layer in the simplified example. The bug seems to be connected with the browser layers.
Update: We also need a css height around 5em, because we animate the red_box from left to right. The bug does only occur if the html element overlaps the window size.
Remove height form .red_box css.
Please use below code:
.red_box {
position: fixed;
right: calc(-50vh + 1em);
width: 100vh;
top: calc(50vh - 1.2em);
/*height: 4.9em;*/
transform-origin: top;
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
background-color: red;
will-change: transform;
}
.blue_box {
width: 60vh;
background: blue;
height: 2em;
}
<html>
<head>
</head>
<body>
<div class="red_box">
<div class="blue_box"></div>
</div>
</body>
</html>
I have a weird issue on Firefox, it kind of sounds like this one: https://bugzilla.mozilla.org/show_bug.cgi?id=829958 but it has been fixed few years ago.
I have an big image inside a wrapper having width: auto; height: 100%;. The only constraint applied to the image is height: 100%;.
The image is correctly scaled down on all browsers to the maximum height available. On almost all browsers, the wrapper is also scaled down to the new (and effective) size of the image. This is not the behavior on Firefox (tested on 50+), Firefox does scale down the image but not the wrapper who keep the original width of the image as its own width.
Here is a codepen to better simulate the issue: https://codepen.io/Tronix117/pen/MEogMv
The img-wrapper can not be in display: inline; because of effects applied on it. More intermediate div can be added if needed.
On the codepen, don't mind the fix width of scroll-wrapper it's a dynamic value, as well as all transforms values.
Images can be of various width and height and the CSS should be responsive.
The idea is to produce a coverflow with different images using Swiper lib.
I have been struggling on this all day, so thank you for your help!
CSS
html,
body {
height: 100%;
width: 100%;
}
* {
padding: 0;
margin: 0;
}
#viewport {
position: absolute;
top: 20px;
bottom: 20px;
left: 20px;
right: 20px;
overflow: hidden;
display: block;
perspective: 1200px;
transform-style: preserve-3d;
}
#scroll-wrapper {
display: block;
position: relative;
width: 3000px;
height: 100%;
transform-style: preserve-3d;
transform: translate3d(-500px, 0, 0);
}
.img-wrapper {
display: inline-block;
white-space: nowrap;
overflow: hidden;
width: auto;
height: 100%;
position: relative;
transform-style: preserve-3d;
border: 4px solid red;
}
img {
height: 100%;
}
#img-wrapper-1 {
border-color: blue;
transform: translate3d(0px, 0px, -500px) rotateX(0deg) rotateY(30deg);
z-index: -1;
}
#img-wrapper-3 {
border-color: green;
transform: translate3d(0px, 0px, -500px) rotateX(0deg) rotateY(-30deg);
z-index: -1;
}
HTML
<html>
<body>
<div id="viewport">
<div id="scroll-wrapper">
<div id="img-wrapper-1" class="img-wrapper">
<img src="http://via.placeholder.com/2000x1200" />
</div>
<div id="img-wrapper-2" class="img-wrapper">
<img src="http://via.placeholder.com/2000x1200" />
</div>
<div id="img-wrapper-3" class="img-wrapper">
<img src="http://via.placeholder.com/2000x1200" />
</div>
</div>
</div>
</body>
</html>
Very interesting problem!
It's most likely a bug with Firefox, though I think that it's probably caused by Firefox unable to find the correct reference height value for all the cascaded height: x%; of nested elements.
So I gave #viewport an explicit height value: height: calc(100vh - 40px); instead of an implicit one from top: 20px; bottom: 20px;. And it does work!
Demo: https://codepen.io/anon/pen/eGRYqx
This question already has answers here:
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Closed 6 years ago.
I've tried almost everything, but maybe my case is too specific. I have a few blocks (rows) without space between then and I need to absolute center it and as you can see it's not centered when is 2 lines.
1) I can have one line or more, so I can't use line-height solution in this case.
2) The flex solution didn't worked for iPhone.
3) The block width and height are variable
4) The text like "personal & buchhaltung" cannot overlap the mouse hover of the block (becomes colorful when mouse hover)
.portfolio-tile span {
width:100%;
position: absolute;
z-index:999;
top:0;
left:0;
right:0;
margin:0;
text-align: center;}
.portfolio-tile {
position: relative;
}
.portfolio-tile span {
max-width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
There are other, better ways of centering. The major problem this one has is when the span has too much content for the parent to fit, as it will overflow. Possible fixes exist but, for your case, this will do.
Here's the fully prefixed code (you mentioned iPhone):
.portfolio-tile {
position: relative;
}
.portfolio-tile span {
max-width: 100%;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
Use autoprefixer to prefix your CSS before deploying to production. For max browser compat, use > 0% as setting (small input at the bottom).
I can't see why the flex solution wouldn't work. Have you tried creating a div within and using the flex solution there?
#absolute {
position: absolute:
top: 0;
left: 0;
width: 100%;
}
#flexbox {
display: flex;
align-items: center;
justify-content: center;
width: 300px;
height: 300px;
background: blue;
}
#flexbox-content {
text-align: center;
color: white;
}
<div id="absolute">
<div id="flexbox">
<div id="flexbox-content">
<h1>It works!</h1>
<p>Multi line!</p>
</div>
</div>
</div>
I have a centered form on my page positioned using top and left values and css3 transformations.
<div class="middle">
<h1>This is blurry, or should be.</h1>
</div>
.middle {
position: absolute;
top: 50%;
left: 50%;
min-width: 390px;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
/** backface-visibility: hidden; **/
}
h1 {
padding-bottom: 5px;
border-bottom: 3px solid blue
}
Notice backface-visibility. When set to hidden, all problems are solved for me using chrome 42. It doesn't render blurry. For others however using the same chrome version, it renders blurry with it.
Here's what it looks like without BV: http://jsfiddle.net/mzws2fnp/
To you it may be blurry, to others it may not.
Here's what it looks like with BV: http://jsfiddle.net/mzws2fnp/2/
For some reason people see the border blurry however I do not. I know backface-visibility: hidden is meant to fix that, and it does for me, just not for others using the same browser as I. Strange.
Try -50.1%
transform: translateY(-50%) translateX(-50.1%);
EDIT:
I have found out, they are blurred when chrome dev tools are opened, try to close them and refresh
This is a bug in Google Chrome. I reported this issue to Google:
Rendering bug in css transform: it blurrs borders
<div class="middle">
<input type="text" />
</div>
.middle {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);
}
input {
border: 1px solid black;
border-radius: 4px;
}
var middle = document.querySelector('.middle');
setInterval(function(){
middle.style.paddingTop = middle.style.paddingTop === "0px" ? "1px" : "0px";
}, 1000);
Animated bug demonstration
When you use percentage, will play an odd number. will blurry borders,
using parseInt to assign the value is integer.
$(document).ready(function(){
$('.middle').css({
'top':parseInt($('.middle').position().top)+ 'px',
'left': parseInt($('.middle').position().left)+'px',
'transform':'none',
'-webkit-transform':'none'
});
});
.middle {
position: absolute;
top: 30%;
left: 50%;
min-width: 390px;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);}
h1 {
padding-bottom: 5px;
border-bottom: 4px solid blue}
.middle2 {
position: absolute;
top: 70%;
left: 50%;
min-width: 390px;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);}
h1 {
padding-bottom: 5px;
border-bottom: 4px solid blue}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="middle">
<h1>This is blurry, or should be.</h1>
</div>
<div class="middle2">
<h1>This is blurry, or should be.</h1>
</div>
In this specific case where you're using a solid border, you can try using a box-shadow instead of a border as a workaround. For example, replace: border-bottom: 3px solid blue; with box-shadow: 0px 3px 0px blue;
Use even number (2px or 4px) for the border. Odd number (3px or 5px) is giving that blur.
border-bottom: 4px solid blue;
there is little hack that can help to get any block as center middle.
in parent <div> where we add position: relative add below properties,
display: flex;
justify-content: center;
now add align-self: center; property with the block which we want to make center middle make sure that this block is absolute position.
Because translated element height is odd number. This will not occur when element height is even number.
This problem occurs when we add
transform: translateY(-50%) translateX(-50%);
OR
transform: translate(-50%, -50%);
it is still as an open issue in chromium bugs list.
I am using the following code to center my div and center the text in my div. This works perfect in my desktops browsers but is spaced bad on ipad and iphones.
Jsfiddle : https://jsfiddle.net/ps7t1rnu/
css
.center-box {
position: absolute;
background: #ccc;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 75%;
height: 75%;
padding: 20px;
text-align: center;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
border-radius: 25px;
}
.cb-text-center {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
html
<div class="center-box">
<div class="cb-text-center"> FOOBAR
BAR BAR
</div>
</div>
The div is centered correctly (as visible on jsfiddle on browser - but on iPhone or iPad it move away from the screen with some weird spacing..
seem image:
You can see the issue when you look at the jsfiddle full screen result - https://jsfiddle.net/ps7t1rnu/embedded/result/ on browser and iPad/iPhone.
thanks for the help..
iOS Safari until and including iOS 8.4, as well as Android browser up until and including Android 4.4 require prefixing the transform property.
-webkit-transform: translate(-50%, -50%);
http://caniuse.com/#search=transform
try this
<meta name="viewport" content="initial-scale=1.0; maximum-scale=1.0; width=device-width;">