I understand that the problem is likely related to the core-header-pannel parent not having a height.
Important: The core-header-panel will not display if its parent does not have a height.
This works fine:
<style shim-shadowdom>
html, body {
height: 100%;
margin: 0;
}
core-header-panel {
height: 100%;
}
</style>
<body unresolved>
<core-header-panel>
<div class="core-header">standard</div>
<div class="content"></div>
</core-header-panel>
</body>
However, when I try to change the core-header-pannel to mode "waterfall-tall", then the header panel does not show.
<style shim-shadowdom>
html, body {
height: 100%;
margin: 0;
}
core-header-panel.tall{
height: 100%;
}
</style>
<core-header-panel mode = "waterfall-tall">
<div class="core-header">waterfall-tall</div>
<div class="content"></div>
</core-header-panel>
During the course of my "experiments" I've referenced both https://www.polymer-project.org/docs/elements/core-elements.html#core-header-panel and https://www.polymer-project.org/components/core-header-panel/demo.html
After viewing various StackOverflow questions I think that somehow the body is now covering the header-pannel, because I'm no longer explicitly setting the height. FYI, I'm totally new to HTML and web development. Any suggestions would be appreciated.
To be clear, my questions are:
The parent element of the core-header-panel is the body correct?
Am I referencing my <core-header-panel mode = "waterfall-tall"> in my <style> section properly?
How can I get this darn header pannel to appear?
update edit:
OK, I found a solution through experimentation with the demo.html of core-header-panel. It works fine on my local host, ie, the header collapses and expands how I expect it should. However, when I paste into jsbin, then I do not get the collapsing effect that I want.
http://jsbin.com/cufefi/1/edit
I think this is due to the utilization of px in the <style> section, but I'm not sure.
Another question: My imports are relative, so how can jsbin resolve the imports?
second update edit:
The behaviour is the same with or without the imports, which implies to me that the imports are not resolved, and this is why the behaviour is different when compared to the behaviour on my local host.
Here you lost the < body > tag, just before the core-header-panel tag. Could be this the error?
<style shim-shadowdom>
html, body {
height: 100%;
margin: 0;
}
core-header-panel.tall{
height: 100%;
}
</style>
<core-header-panel mode = "waterfall-tall">
<div class="core-header">waterfall-tall</div>
<div class="content"></div>
</core-header-panel>
Related
Trying to work out if this is a bug with Chrome or with my code. With the below code, when I scroll down it does what I want it to, but when I scroll up it lets me scroll as high as I want without the body snapping back. I've applied the scroll snapping to html because it does not work in Chrome if on body.
Demo: http://manifest.thedevtest.com/scrollsnap/ (scroll up)
Code:
<html>
<head>
<title>Chrome Scroll Snap Issue Demo</title>
<style>
* {
margin: 0;
padding: 0;
}
html {
scroll-snap-type: mandatory;
scroll-snap-points-y: repeat(100vh);
scroll-snap-type: y mandatory;
background: red;
}
section {
height: 100vh;
width: 100vw;
scroll-snap-align: start;
}
.foo {
background-color: green;
}
.bar {
background-color: blue;
}
</style>
</head>
<body>
<section class="foo">
</section>
<section class="bar">
</section>
</body>
</html>
Can you guys replicate this, and if so, do you have any thoughts on preventing it?
I still haven't ascertained whether this is a bug with chrome or not, but the fix is to manage the overscroll behaviour (which can be done in Chrome) https://developers.google.com/web/updates/2017/11/overscroll-behavior
body {
overscroll-behavior-y: none;
}
Does the job. With thanks to /u/Anemina on reddit. https://old.reddit.com/r/css/comments/i9kkiw/scroll_snap_bug_chrome_on_mac/
Looks like someone logged a bug already for the HTML continued overflow bug. I've seen 1 other issue like this too, where you could keep scrolling up, where scroll-snap-points weren't used. So I don't think they're the issue.
I was able to put scroll-snap-type on body, which fixed the demo for me. Chrome 87.
body {
scroll-snap-type: y mandatory;
}
Try again?
My 2 cents / thoughts:
I don't think it's a good idea to put scroll snap on the html tag. I usually end up extracting my body scroll-snap prototypes into a <main> or something, and make it more of a component than a document style.
I am simply adding a header navbar to an html page.But the problem is its not aligned exactly to the top.There is a small gap between the browser and the navbar.I found a solution as setting margin:0;,but the issue I have is it will only work if I code it as by selecting the whole div... like
*{ margin:0;}
why is that so ?
I found this solution in another stackoverflow question but I cant comment and ask because I have low repuation.He is stating its because of SASS.But how is my code becoming sass because I was using normal simple procedure for CSS coding.
Linked soultion question.(Please check the comments in correct selected question)
Header not touching top of screen
My code :
<html>
<head>
<style>
* {
margin:0;
}
.new {
width:100%;
background-color: blue;
}
</style>
</head>
<body>
<div class="new">New Website</div>
</body>
</html>
Some browser have set user agent stylesheet at "body" tag
For Chrome: body have margin: 8; on body tag, so you will get a small gap between navbar.
You can set
body{
margin: 0;
}
Will solve your problem.
http://jsbin.com/luqoruqewa/edit?html,output
Don't put the margin: 0; on the div. Put it on the body or html tag. Like so:
body{
margin: 0;
}
Don't forget that you can style the html and body tags too! Making them height: 100%; might be of use in the future.
* is the universal selector. It targets all elements. When you state:
* {margin: 0}
You're removing the margin from every element on the page. That works in this case, but it will have side effects that you probably won't want on a page with more content.
Your browser is adding some padding to the body element. As amoyer pointed out, set the body margin to zero and you should be fine.
I am building an SPA polymer 1.0 app that looks like this:
<iron-pages attr-for-selected="data-page"
selected="{{page}}">
<div data-page="home">
<paper-header-panel mode="{{mainMode}}">
<profile-toolbar></profile-toolbar>
<div class="content">
<search-menu></search-menu>
</div>
</paper-header-panel>
</div>
<div data-page="search">
<paper-drawer-panel ...>
...
</paper-drawer-panel>
</div>
</iron-pages>
<profile-toolbar> is a custom element that contains a <paper-toolbar>. If I leave out the <paper-header-panel> it works, but there's a padding and the scrolling doesn't work right. So I added a <paper-header-panel>.
The second page also contains a <paper-header-panel> inside the drawer and works correctly, but I can't make the first page display anything if it contains a <paper-header-panel>. What am I missing?
Try adding following css class to divs that are direct parents of your paper-header-panels:
.content {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
Here is a solution you might try.
Note this open bug that has (apparently) been resolved for all except iOS (Safari).
I am using chrome version 18.0.1025.162 m
I have html file with iframe within it.
i cant change the containing page or its css (main.htm)
i can only change the iframe (show.htm) and its css.
The problem is that when i scroll down and then scroll back up then the adminbar div get replicated several time.
I am attaching 2 screenshots the first one is the screen before scrolling and i also add the code so that the bug can be reproduced.
I think it may be a bug in chrome, i am not sure.
I would like to know if it is a a bug and more importantly if there is a work around by only changing the iframe and that it does not include removing the background color from the iframe.
(removing the background color from the iframe solve the issue but i need the background color)
so this is how it looks:
before scrolling:
after scrolling (admin bar get replicated on screen)
now code to reproduce the bug in chrome
first file - main.htm (i cannot change this code)
<!-- main.htm -->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
#adminbar
{
background-color: #464646;
height: 28px;
position: fixed;
width: 100%;
top: 0;
}
#body-content
{
float: left;
width: 100%;
}
</style>
</head>
<body >
<div id="body-content">
<iframe src="show.htm" width="100%" height="943"></iframe>
<div id="adminbar" class="" role="navigation">
</div>
</div>
</body>
</html>
and the show.htm
<!-- show.htm -->
<!DOCTYPE html>
<head>
<style type="text/css">
body
{
background: #e0e0e0;
}
</style>
</head>
<body>
<br/>
<p style='margin-bottom:500px;'>bazinga</p>
<p style='margin-bottom:500px;'>bazinga</p>
<p style='margin-bottom:500px;'>bazinga</p>
</body>
</html>
i think i found a workaround.
i created a file background.png which has one pixel with the color i want (#e0e0e0).
i then replace this:
body
{
background: #e0e0e0;
}
with this:
body
{
background: #e0e0e0 url(background.png) repeat-x;
background-attachment: fixed;
}
Add -webkit-transform: translate3d(0,0,0); to your body-content CSS
CSS
#body-content {
float: left;
width: 100%;
-webkit-transform: translate3d(0,0,0);
}
This seems to force Chrome to use your GPU and smooth out the rendering issue.
UPDATE: Since you can't change main.htm, what about changing the background color of show.htm to a background image of the same color? I tested this and it worked. Is that a possibility?
I recreated your setup and then added a script to the body of show.htm. As a quick measure I added a name="if1" to the <iframe /> in main.htm, but you could always find a handle on the element without using an explicitly assigned name.
It seems to solve the issue for the dummy setup that you provided, if and only if main.htm is scrolled all the way to the top. Think it's weird, join the club! See if this works for the real thing... Either way, it may just be a nudge in the right direction! :)
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body
{
background: #e0e0e0;
}
</style>
</head>
<body>
<br/>
<p style="margin-bottom:500px;">bazinga</p>
<p style="margin-bottom:500px;">bazinga</p>
<p style="margin-bottom:500px;">bazinga</p>
<script type="text/javascript">
window.onscroll = function(){
console.log("It's 'Doctor' Sheldon Cooper!");
//parent.document.if1.document.body.style.webkitTransform = 'scale(1)';
var _parentScale = parent.document.body.style.webkitTransform;
parent.document.body.style.webkitTransform = _parentScale;
}
</script>
</body>
</html>
I also tried to experiment with the following until it became bed-time!
<script type="text/javascript">
window.onscroll = function(){
console.log("It's 'Doctor' Sheldon Cooper!");
//parent.document.if1.document.body.style.webkitTransform = 'scale(1)';
var _me = document.body;
_me.style.webkitTransform = _me.style.webkitTransform;
//_me.style.display='none';
_me.offsetHeight
//_me.style.display='block';
var _parent = parent.document.body;
_parent.style.webkitTransform = _parent.style.webkitTransform;
_parent.style.display=_parent.style.display;
_parent.offsetHeight
//_parent.style.display='block';
}
parent.window.onscroll = function(){
console.log("But. You're in my spot!");
//parent.document.if1.document.body.style.webkitTransform = 'scale(1)';
var _me = document.body;
_me.style.webkitTransform = _me.style.webkitTransform;
//_me.style.display='none';
_me.offsetHeight
//_me.style.display='block';
var _child = parent.document.if1.document.body;
_child.style.webkitTransform = _child.style.webkitTransform;
_child.style.display=_child.style.display;
_child.offsetHeight
//_child.style.display='block';
}
</script>
I also attempted to apply j08691's answer, using the following script, but it gave slightly unexpected results. I caused the absolute positioned top bar, to not be fixed, among other things!
window.onload = function(){
console.log("It's 'Doctor' Sheldon Cooper!");
var test = parent.document.getElementById("body-content");
test.style.webkitTransform = "translate3d(0,0,0)";
}
One may already exist, but if not, could you file this as a bug report on the relevent projects?
Improving / simplifying yossi's answer:
body
{
background:url('bg.png');
}
no need to declare bg-color or repeat-x, just needs a background image.
Tested on Chrome 18.0.1025.168, Mac OS X 10.6.8.
Remove the float: left; from your #body-content css and it will work just fine.
This looks to be a rendering bug in chrome. If you scroll back up really slowly, you'll notice that you get a solid colour from your admin bar as the colour of your iframe.
Incidentally chrome on OSX renders exactly the same.
#adminbar {
background-color: #464646;
height: 28px;
position: fixed;
width: 100%;
top: 0;
right:0px
}
#body-content {
float: none;
width: 100%;
}
It would help to get a live-demo/version of your actual website to do more thorough testing and sort the bug out.
In any case, I was able to reproduce the bug and then fix it (kind of):
Here's the 'show' css:
body
{
background: #e0e0e0;
height:100%;
width:100%;
z-index:9999;
position:fixed;
}
and Here's the link to my test page:
sotkra.com/t_main.html
last but not least, yes it is a bug and it caused by the flickering of the scrolling of the iframe content against the actual 'base' document. I've seen similar issues before but there was equally no documentation about it. They're just rendering bugs, usually caused by less than specific css or very very odd cases where it's nobody's fault save the browser's.
Cheers
G
Using a gradient as your background image also works. This is preferable for me, because I don't have to create an image file and it doesn't generate an extra request on the client side.
body {
background: #FFF -webkit-linear-gradient(top, #FFF, #FFF) repeat-x;
background-attachment: fixed;
}
I want my page's BODY not to be scrollable but a DIV inside the BODY should be scrollable.
I have this in my css file:
body {
overflow:hidden
}
.mainSection {
overflow:scroll
}
but it doesn't work and the DIV doesn't become scrollabel (it just shows two disabled scroll bars for the DIV)!
.mainSection needs to have a height. Otherwise the browser can not know what it should consider overflow.
Are you sure the style for your mainSection class is being applied? You can use a tool like Web Developer or Firebug (for Firefox) to make sure that the style is being correctly applied. Also if you just have one mainSection, you might want to use an id instead of a class. the tag in html would then be <div id="mainSection"> instead of <div class="mainSection"> and the css becomes #mainSection { ... } instead of .mainsection { ... }
Here is the whole thing well explained
http://www.w3schools.com/css/pr_pos_overflow.asp
You can experiment.
I had the same problem before, but I could manage to solve it just with overflow: auto;. Try it and it will work.
Updated
The full html code looks like this
<html>
<head>
<title>Test page</title>
<style type="text/css">
#scrollable_div{
overflow: auto;
width: 100px;
height: 100px;
border: solid thin black;
}
</style>
</head>
<body>
<div id="scrollable_div">my div text</div>
</body>
Works perfectly in any browsers. I tested myself in Chrome, IE, Safari, Mozilla, and Opera