I'm trying to use CSS Containment(contain: layout), but it doesn't seems to work correctly on Chrome 62.
I want to know a proper way to use contain: layout or what is my misunderstanding.
Code is here:
index.html:
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>CSS Containment</title>
<script src="main.js" defer></script>
</head>
<body>
<div id="container" style="contain: layout; height: 300px; width: 300px">
</div>
</body>
</html>
main.js:
const container = document.querySelector('#container');
setTimeout(() => {
const elem = document.createElement('div');
elem.textContent = 'content';
container.appendChild(elem);
}, 100);
I expect that the #container element is rendered as a layout root after appendChild(elem), but Chrome Dev Tool shows that the root is still the #document.
On the other hand, contain: layout size or contain: strict works correctly, which means #container becomes a layout root.
Other browsers don't support CSS Containment yet, so I can't identify it's Chrome-specific or on the spec.
If you have any ideas, please give me a hand.
Related
I've tried every combination that was given in the answers throughout the different sites.
Here's my code.
<div class="circular" v-bind:style="{ 'background-image': 'url(' + require('../assets/kafa.jpg') + ')' }"></div>
The problem is (I think) that path is good, and image is found, it just won't show on the background (or anywhere for that matter).
And here is the image of the page and Inspect Elements
Thanks.
Okay, so I found the problem. I closed the tag in the same line, instead of wrapping whole template in that div.
According to vue documentation:
https://v2.vuejs.org/v2/guide/class-and-style.html
in the section of “Binding Inline Styles” and “Object Syntax” it describes that you could define peroperty-values of styles in the “data” part of “vue instance”. This is what I was doing for implementing that:
new Vue ({
el: "#app",
data: {
activeColor: "red",
backImg: 'url("galaxy.jpg")'
}
});
.circular {
min-height: 1080px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="app">
<div class="circular" v-bind:style="{color: activeColor, backgroundImage: backImg}"> texts to show styles</div>
</div>
<script src="vue.js"></script>
<script src="myScript.js"></script>
</body>
</html>
I used the “camelCase” format and the image is something different, you can substitute your own “url” in the “data” part of “vue instance” in the script code. I could not upload my used image, but you could test your own image.
I've just setup atom and installed p5.js packages.
it is running but canvas is not visible.
sketch.js
function setup() {
createcanvas(200,200)
canvas.style("visibility", "visible")
// put setup code here
}
function draw() {
// put drawing code here
background(0);
rect(100,100,50,50);
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>p5.js example</title>
<style>
body {
padding: 0;
margin: 0;
}
</style>
<script src="libraries/p5.js"></script>
<script src="libraries/p5.sound.js"></script>
<script src="sketch.js"></script>
</head>
<body>
</body>
</html>
on running it using atom editor the canvas is not visible on the browser screen
You have to capitalize the second c in createCanvas(width, height);
You can't use canvas.style("visibility", "visible"), so remove that line
3.For future reference, inspect the page and look at the console, I found both of these things from errors.
function setup() {
createcanvas(200,200)//on this line, capitalize the c in canvas
canvas.style("visibility", "visible")//remove this line
// put setup code here
}
Your html is all correct
#Hgbanana is correct. I thinks it would be better if you put your library scripts in the head tag to make sure the libraries load before the page. But it should work anyways.
I tried to create rectangle in canvas, i am bit confused with coordinate system of canvas
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Dialog - Modal form</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<style>
body{
background-color: #231F20;
}
#ribbonid{
width:90px;
height: 90px;
}
</style>
</head>
<body>
<canvas id='ribbonid' > </canvas>
<script>
$(document).ready(function(){
var $ribbonid = $('#ribbonid');
// get the canvas element using the DOM
var canvas = document.getElementById('ribbonid');
// Make sure we don't execute when canvas isn't supported
if (canvas.getContext){
// use getContext to use the canvas for drawing
var cts = canvas.getContext('2d');
cts.fillStyle = '#f7911e';
cts.beginPath();
cts.moveTo(0, 0);
cts.lineTo(90, 0);
cts.lineTo(90, 90);
cts.lineTo(0, 90);
cts.lineTo(0, 0);
cts.fill();
cts.closePath();
}
});
</script>
</body>
</html>
http://jsfiddle.net/bkf2e/
i am aware of canvas.rect function, but i need to create some different shape for me.
I created rectangle of size (90,90)(square), but it is creating full square.
I know it may be my simple mistake, but can you please help me on that.
you need to set the size of your canvas using the width and height attributes, if you use css to size it then it will scale the default size rather than becoming the size you want, which is why it was distorted like that.
I've updated your jsfiddle with the attributes set and you'll see that it's now square.
solved problem,
it was silly mistake of width and height attribute
<canvas id='ribbonid' width='90' height='90' > </canvas>
I have a problem after updating to iOS 6 that is driving me nuts.
It looks like any time I have the attribute "placeholder" on an input field, while rotating from
Portrait to Landscape and back to Portrait again the page shifts some pixels on the left side causing a horizontal bar.
I concluded after long research that it has to be something related to the meta viewport because every time I use the content="width=device-width" all works fine.
P.S Yes I really need to have a percent width on the input so as to have liquid design:)
Here is the example to recreate the issue. Thanks...
<html>
<head>
<title>test</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport"/>
</head>
<body>
<div style="width:100%;background-color:red">
<input id="testInput" placeholder="test" style="width:90%;" />
</div>
</body>
</html>
Applying "overflow: hidden;" on the containing element solved this issue for me.
I found this problem.
and fix it.
(URL : http://mooki83.tistory.com/2656550 (in korean))
testURL : http://mooki83.da.to/m/testios6.html
javascript :
/* Optimized PLACEHOLDER for iOS6 - Mooki ( http://mooki83.tistory.com ) */
$(document).ready(function(){
$(window).bind("orientationchange.fm_optimizeInput", fm_optimizeInput);
});
function fm_optimizeInput(){
$("input[placeholder],textarea[placeholder]").each(function(){
var tmpText = $(this).attr("placeholder");
if ( tmpText != "" ) {
$(this).attr("placeholder", "").attr("placeholder", tmpText);
}
})
}
CSS fix:
body>div {
overflow-y: auto;
}
Non js answer
Add overflow:hidden to parent element
and it will work like a charm
I'm just trying to create a canvas in my browser with the following code :
<!DOCTYPE html>
<html lang="eng">
<head>
<title<abc</title>
<script type="text/javascript">
window.onload=canvasApp();
function canvasApp()
{
var canvas=document.getElementById("one");
if(!canvas||!canvas.getContext)
return;
}
</script>
<meta charset="utf-8">
<body>
<canvas id="one" width="400" height="500">
Your browser doesn't support canvas
</canvas>
</body>
</html>
Why i'm getting canvas=null in the following line
var canvas=document.getElementById("one");
(I'm using the latest versions of chrome and firefox)
Your HTML leaves somewhat to be desired.
Give the W3C Validator a go. Right now it reports 7 Errors and 4 warnings.