I'm running into a weird issue on Safari and Chrome (mobile/desktop) that when I apply a global style for webkit-transform:translate3d, div background colors and 100% height set in the style no longer work. Additionally, setting top:0px and bottom:0px fail too. When I remove the global -webkit-transform style, everything works as expected. Any ideas?
*
{
-webkit-user-select: none;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
margin:0px;
-webkit-transform:translate3d(0,0,0);
}
Full sample
<!DOCTYPE HTML>
<html>
<head>
<title>Sample</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<style type="text/css">
*
{
-webkit-user-select: none;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
margin:0px;
-webkit-transform:translate3d(0,0,0);
}
body {
height:100%;
}
</style>
</head>
<body >
<div id="myDiv" style="position:absolute;top:0px;left:0px;width:320px;height:100%;bottom:0px;display:block;background:black;color:black;border:1px solid black;">
adsfasdf
</div>
</body>
</html>
You should try using the following.
.hwa {
-webkit-transform: translate3d(0,0,0);
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
-webkit-transform-style: flat;
}
only on the div.
<div class="hwa"></div>
This way you don't have to worry about descendent selectors which uses a lot of CPU before compositing the layers and creating the GPU. Keep in mind that GPU acceleration uses 4x the memory of standard CPU animation (reflow / recalculate / paint )
Also you should make sure that you help out the Browser as much as possible, this means use width: 100%, height: 100% sparingly since it takes a lot of CPU to figure out how to construct the composite layers prior to GPU taking over.
I'm not sure why you'd want to apply a transformation to everything (perhaps you want the GPU to kick in?) in any case, the transformation on the html is causing this. You can solve it easily:
*:not(html)
{
-webkit-user-select: none;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
margin:0px;
-webkit-transform:translate3d(0,0,0);
}
See http://jsfiddle.net/Wv5Mx/
Related
The cloud looks like it's inside the mountain image's box/outline. I thought the margin should be affected relative to either parent div container or viewport. I am new to CSS and don't understand why this is happening ?
Taken screenshot with pesticide activated for the outlines
body {
background-color: grey;
margin: 0;
text-align: center;
}
.top-container {
background-color: #E4F9F5;
position: relative;
padding-top: 100px;
}
.cloud2 {
position: absolute;
margin-top: 50px;
margin-left: 15px;
}
<body>
<div class="top-container">
<img class="cloud1" src="images/cloud.png" alt="cloud-img">
<h1>Welcome</h1>
<p>This is jungle</p>
<img class="cloud2" src="images/cloud.png" alt="cloud-img">
<img class="mountain" src="images/mountain.png" alt="mountain-img">
</div>
</body>
With position: absolute (and fixed) you always want to provide one or more positioning constraints (i.e. top, left, bottom, right) so that css knows how to position the element relative to the "nearest positioned ancestor".
By positioning an element absolutely, you are telling css that you want to position this element such that it takes up no space on the DOM with regard to the flow layout. Without providing any positioning constraint css only knows the element to which it should position.
You may assume the default is just to place the element in the top left (i.e. top: 0, left: 0) but that's not the case. The absolute element will just be thrown where it would have been positioned as a static element but without taking up any of the block/inline space. So this is why the order of the element relative to its siblings is important when no positioning constraints are used. By the way I have NEVER used this in my career, I've always used positioning constraints to be explicit! See demo below.
So short answer is just use positioning constraints and you're good.
body {
background-color: grey;
margin: 0;
text-align: center;
}
.top-container {
background-color: #E4F9F5;
position: relative;
padding-top: 100px;
}
.cloud2 {
position: absolute;
margin-top: 50px;
margin-left: 15px;
top: 0;
left: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="top-container">
<img src="https://www.pinclipart.com/picdir/middle/538-5386297_cloud-outline-png-clipart-transparent-background-gray-clouds.png" alt="cloud-img" width="20%">
<h1>Welcome</h1>
<p>This is jungle</p>
<img class="cloud2" src="https://www.pinclipart.com/picdir/middle/538-5386297_cloud-outline-png-clipart-transparent-background-gray-clouds.png" alt="cloud-img" width="20%">
<img class="mountain" src="https://www.pngkey.com/png/full/111-1118124_cartoon-clip-art-transprent-png-free-download-mountain.png" alt="mountain-img" width="80%">
</div>
</body>
</html>
There are many gotchas with position: absolute so be aware.
Aside
CSS takes time to know and understand. There are rules to guide you
but a lot of the learning process is trial and error and on top of that the rules are somewhat different between browsers too. I've found many
solutions to extreme edge cases that I have since forgotten, the trick
is to remember just enough to find the solution again. Over time it
will become second nature. Also using the dev tools elements->styles
panel to quickly experiment can help you find a solution or learn
about all the properties and their values.
I'm trying to get an image to go over my posts, so the text and images go behind the image. The z-index isn't working when i try to get it to stack over everything. I'm not an expert at coding and I'm honestly just using tumblr for this, but I can't seem to find an answer anywhere. or one that I can understand, given the fact that I'm still a beginner. Any help would be super appreciated, here's the code:
#char {
position:fixed;
opacity: 1.0;
width: 1366px;
height: 768px;
TOP:0px;
LEFT:0px;
z-index: 4;
}
I have added a code snippet, it contains just a div. The div overlaps the body. if you provide your source code, I can clarify though. you could also try increasing the z-index to 99 or 999. I think there is many z index'd div's in your code.
<html>
<head>
<title></title>
</head>
<style type="text/css">
#char {
position:fixed;
opacity: 1.0;
width: 1366px;
height: 768px;
TOP:0px;
LEFT:0px;
z-index: 4;
background-color: red;
}
body{
background-color: #ccc;
}
</style>
<body>
<div id="char">
</div>
</body>
</html>
You could also try adding the image as a background image to an element and then putting your text in another element inside of that one. With a few lines of alignment code you can get your text where you want it.
<style>
.divStyle {
background-image: url('http://38.media.tumblr.com/a10b40131efc719d0bff421226b9c52b/tumblr_inline_mq5b19gEvv1qz4rgp.jpg');
background-size: cover;
height: 90vh; // put this to a 100 to cover the full height of the containing element (less here to avoid scroll bar)
width: 100%;
display: flex;
align-items: center; //change center to 'flex-start' to move text to top or 'flex-end' to move it to the bottom
}
.myText {
width: 100%;
color: white;
font-size: 24px;
text-align: center; //can also be 'left' or 'right'
}
</style>
<div class="divStyle">
<div class="myText">Here is my text</div>
</div>
can someone point me or give a hint, solution on how to modify a modal box which the height are offset to the browser height resolution?
currently if I have a modal box height of 500px by 1200px and my browser is 1280x1024, the modalbox is not scrolling and cannot view the under parts of the box.
I hope you can help me, thank you
TIA
I am assuming you want to set the modal width/height as a percentage of the viewport (e.g. browser window)?
You can do this with CSS providing width and height of html/body are set to 100% first.
As an example, a modal sized to 50% of the viewport and fixed to the center would look like;
<html>
<head>
<style type="text/css">
html, body { margin: 0; padding: 0; }
html, body { height: 100%; width: 100%; }
#modal {
width: 50%;
height: 50%;
position: fixed;
top: 50%;
left: 50%;
margin-top: -25%;
margin-left: -25%;
/* display: none; */
}
</style>
</head>
<body>
<div id="modal">
<h1>modal</h1>
</div>
</body>
</html>
I have a set up where I have three squares, the first two are set up to fade away when the third one is clicked. When you click it what happens though is the first two just disappear, no fading, I can't really figure out why, any thoughts?
http://jsfiddle.net/6fSEz/
that's the fiddle and this is the code by itself:
<html>
<head>
<style>
.box
{
opacity:1;
color: white;
width: 100px;
height: 100px;
}
#box1
{
background-color: green;
}
#box2
{
background-color: red;
}
#box3
{
background-color: blue;
}
.fadeAway1
{
opacity:0;
-webkit-transition-property: opacity;
-webkit-transition-duration: 2s;
}
.fadeAway2
{
opacity:0;
-webkit-transition-property: opacity;
-webkit-transition-duration: 5s;
}
</style>
</head>
<body>
<div id="box1" class="box"></div>
<div id="box2" class="box"></div>
<div id="box3" onclick="box2.className='fadeway1';box1.className='fadeaway2';"
class="box">Tap to fade</div>
</body>
</html>
Thanks in advance for any help.
In the click function you are removing the styles applied by the ".box" class styles. This removes the width and height, etc. Also, CSS and JavaScript are case-sensitive. Capitalization between selectors must match the element attributes, exactly.
Updated jsfiddle: jsfiddle.net/6fSEz/2/
Using the code below, both Chrome and Opera (latest versions supporting border-radius) on Mac show a small blue area outside the rounded corners (which seems to a part of the defined background-image). Why?
<!doctype html>
<head>
<title>Testcase for rounded corners on submit button with bg-image</title>
<style type="text/css">
input[type="submit"] { background: url(http://skriblerier.net/div/rounded-corners-input/bg-bottom.png); color: #fff; height: 40px; width: 150px; border-radius: 10px; border: 1px solid #fff; font-size: 14px }
</style>
</head>
<body>
<form>
<div><input type="submit" /></div>
</form>
</body>
I worked around this with background-clip: http://www.css3.info/preview/background-origin-and-background-clip/
background-clip: padding-box;
-moz-background-clip: padding;
-webkit-background-clip: padding;
FF3.6 does it as well, but not as noticeably (with -moz-border-radius, of course). Looks like they're trying to automatically smooth out the corners, and just can't hide all of the background when there's also a border applied. Removing the border declaration (not the border radius) will fix it. So:
border-radius: 10px; border: 1px solid #fff; making it: border-radius: 10px;
I suspect, but don't know, that this has to do with the difficulties of faking half-pixels and nesting round shapes in more of a bitmap than vector 'space'.