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>
Related
I'm trying to scale the elements in my body tag so that my website looks the same on differing screen sizes. However, when I apply transform: scale(), the fixed elements associated with bottom disappear. Why is this and how can I fix it?
css
body
{
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
-webkit-transform: scale(1, 1);
}
#invite
{
position: fixed;
bottom: 20px;
right: 31px;
text-align: center;
cursor: pointer;
}
The invite element disappears when I scale with 1.
It will be more helpful if you could include your code and I think you should use media query if you are trying to make your page responsive.
transform:scale(0.5) will create a new binding box for the position:fixed; element, (when that element is a child of the transformed item)
relevant Stackoverflow question
and further explanations in the chromium bug tracker
Example 'buggy' behaviour:
div {
margin: 20px;
padding: 20px;
}
.body {
background: olive;
min-height:600px
}
.main {
background: pink;
}
.bottom {
background: orange;
position: fixed;
bottom: 0;
}
.body:hover {
transform: scale(1)
}
<div class='body'>
<div class="main">
main content</div>
<div class="bottom"> bottom content </div>;
</div>
As for alternatives: responsive design; the general philosophy is to re-arrange elements into a single vertical stack as the viewport gets smaller.
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
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?
I'm trying to have pure HTML text rotated vertically and be sided with horizontal HTML text.
Here's a example image of what I want to do. Can someone give me an idea of how to do this?
I have had a go at getting something like this to work. Have a look at the result here at jsFiddle.
I'm using a container div which is set to scale while keeping its height relative to its width using this approach.
Inside this container div I have set all div's to be absolutely positioned. To get the positioning of the rotated div's right I have set them to stick to the left bottom corner first, set their transform-origin to 0 0 and then rotated them -90 degrees using transform: rotate(-90deg);, then I have moved the second rotated div along a little by setting its left property.
I'm using em's for positioning to ensure the position of the div's changes depending on the size of their font.
I'm using a jQuery plugin named FitText to tune the div's font-size properties.
I've used transform: scale(); to stretch some of the div's contents.
You'll find it will take a little tuning of the FitText plugin settings, the em values of the div's top and left properties and the scaling to make your texts fit. But once you've got it right it will scale beautifully when changing the width of the container div.
If you want to change the aspect ratio of the container, you'd have to create your own transparent image with the right aspect ratio.
HTML
<div>
<div class="container">
<div>ABCDEFGHIJKLMNO</div>
<div>ABCDEF</div>
<div>ABCDEFGHIJKLMNO</div>
<div>HELLO</div>
<div>QRSTUVWXWZABC</div>
<div>DEFGHIJKL</div>
</div>
<img src="https://dl.dropboxusercontent.com/u/6928212/threebytwo.png" />
</div>
CSS
html, body {
width:100%;
height: 100%;
font-family:"Arial Black", "Arial Bold", Gadget, sans-serif;
}
body > div {
position: relative;
}
img {
display: block;
width: 100%;
}
div.container {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
border: 1px dashed black;
overflow: hidden;
}
div.container > div {
width: 100%;
position: absolute;
line-height: 1em;
background-color: #FFF;
}
div.container > div:nth-child(even) {
-webkit-transform:rotate(-90deg);
-webkit-transform-origin: 0 0;
transform:rotate(-90deg);
transform-origin: 0 0;
-moz-transform:rotate(-90deg);
-moz-transform-origin: 0 0;
bottom: -1em;
}
div.container > div:nth-child(odd) {
z-index: 1;
}
div:nth-child(3) {
top: 1.1em;
left: 1.6em;
}
div.container > div:nth-child(4) {
left: 1em;
}
div.container > div:nth-child(5) {
-webkit-transform: scale(1, 2);
-moz-transform: scale(1, 2);
transform: scale(1, 2);
top: 2.8em;
left: 3.8em;
}
div.container > div:last-child {
-webkit-transform: rotate(0deg) scale(1, 2);
-moz-transform: rotate(0deg) scale(1, 2);
transform: rotate(0deg) scale(1, 2);
top: 2.3em;
left: 2.3em;
}
JS
$(function () {
$("div.container > div:nth-child(1)").fitText(1.15);
$("div.container > div:nth-child(2)").fitText(0.8);
$("div.container > div:nth-child(3)").fitText(1.31);
$("div.container > div:nth-child(4)").fitText(0.75);
$("div.container > div:nth-child(5)").fitText(1.46);
$("div.container > div:nth-child(6)").fitText(0.9);
})
Here I made an example:
<!doctype html>
<html>
<head>
<style type="text/css">.vertical{
width: 0px;
word-wrap: break-word;color:grey;float:left;margin-left:10px;}
.horizontal{float:left;margin-left:10px;}
</style>
</head>
<body>
<div class="horizontal">l e t t e r s</div><br>
<div class="vertical">abc</div>
<div class="horizontal">l e t t e r s</div><br>
<div class="vertical">abc</div>
<div class="horizontal">l e t t e r s</div><br>
<div class="vertical">abc</div>
<div class="horizontal">l e t t e r s</div>
</body>
</html>
The layout I'm trying to achieve is shown in this image:
The HTML below is one of many attempts which haven't worked. The project this is for is targeting HTML5 in the latest browsers only, so there is no need for it to work in anything except the latest Chrome, Safari, Firefox and (with a following wind) IE9 beta.
<!DOCTYPE html>
<html>
<body>
<div style="border: solid 1px red; width:600px; height: 600px">
<span style="-webkit-transform:rotate(-
90deg);display:block;position:absolute;bottom:600px">My Vertical Text</span>
<img src="http://www.gizmodo.com/assets/resources/2007/01/Bill-gates-mugshot.jpg"
style="position:absolute;bottom:600px" />
</div>
</body>
</html>
I suppose you might want something like this: http://jsfiddle.net/aNscn/3/
bottom: 600px is going to get you nowhere - that's just going to put the elements 600px away from the bottom of the user's screen. Instead, give the outer div a position: relative and let the two elements align to it's bottom with a suitably low bottom value. Also check out the transform-origin property to get the positioning of the span correct after rotation.
#outer {
border: solid 1px red;
width:600px;
height: 600px;
position: relative;
}
#text {
-webkit-transform: rotate(-90deg);
-webkit-transform-origin: left top;
-moz-transform: rotate(-90deg);
-moz-transform-origin: left top;
-o-transform: rotate(-90deg);
-o-transform-origin: left top;
transform: rotate(-90deg);
transform-origin: left top;
position: absolute;
bottom: 0;
left: 5px;
}
#img {
position:absolute;
bottom: 15px;
left: 30px;
}