META: I asked this question over at Webmasters Stack Exchange, but they booted it, and told me to ask here. Apparently Webmasters only ever want to talk about SEO.
Original Post:
I am having a VERY strange issue with Chrome on the Mac.
I have this page: https://heartoflongislandna.org/cleantime/
It's a simple JS app that takes a date, calculates a time difference, then displays a bunch of mortised transparent PNG images that display awarded keytags. These overlap each other in two layouts:
Vertical, where one is laid over another in a vertical "chain," and
Horizontal, where they are placed side by side, but overlapping, like a spread out deck of cards.
What is happening, is that the layouts display (and print) fine in Safari and FF, but in Chrome, the print screws up. The screen display is fine, and looking at it with the device pane set to print also shows them fine.
There is also a small PNG image that is added to some of the images to close the ring at the top. That is added as a top, center background image.
The vertical layout is a bit better than the horizontal, in that the background transparency is honored, but the background image is lost (top keytag).
The horizontal layout is a mess. The background image is not displayed, and the background transparency is not honored.
I will add that examining this with Chrome's device view panel set to "Print" does not show a problem. It looks great. The print preview shows the issue, and opening the image in Preview also shows the problem, which is in the renderer.
*UPDATE 2: This is now available as a fiddle, here: http://jsbin.com/kakirinife/edit?html,output
The (Fiddle) HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>CSS Issue Demo</title>
<style type="text/css">
/** This is the container for the keytag display. */
.NACC-Keytags {
margin-top: 122px;
display: table;
margin-left: auto;
margin-right: auto;
background-color: transparent;
}
/** This allows us to compensate for the automatic offset of the tags. */
.NACC-Keytag-Tabular {
margin-top: 82px;
padding-right: 50px;
text-align:left;
}
/** This describes a keytag image layout. */
.NACC-Keytag {
width: 100px;
max-width:100px;
overflow: visible;
margin-top:-122px;
display: block;
margin-left: auto;
margin-right:auto;
background-color: transparent;
}
/** If we are displaying a closed ring, then we add an image to the background. */
.NACC-Keytag.NACC-Keytag-Ringtop {
background-image: url('https://i.stack.imgur.com/QcEYN.png');
background-position: center top;
background-size: 100%;
background-repeat: no-repeat;
background-attachment: local;
}
/** We display inline-block, so we get a flow that will wrap. */
.NACC-Keytag-Tabular .NACC-Keytag {
display: inline-block;
margin-top:-82px;
margin-right:-50px;
}
</style>
</head>
<body>
<div class="NACC-Results">
<div class="NACC-Keytags NACC-Keytag-Tabular">
<img class="NACC-Keytag NACC-Keytag-Ringtop NACC-White-Tag" src="https://i.stack.imgur.com/AVIug.png">
<img class="NACC-Keytag NACC-Keytag-Ringtop" src="https://i.stack.imgur.com/j11kj.png">
</div>
</div>
<div class="NACC-Results">
<div class="NACC-Keytags">
<img class="NACC-Keytag NACC-Keytag-Ringtop NACC-White-Tag" src="https://i.stack.imgur.com/AVIug.png">
<img class="NACC-Keytag" src="https://i.stack.imgur.com/j11kj.png">
</div>
</div>
</body>
</html>
</body>
The Images:
UPDATE: I determined that this is likely a Chrome bug, and I reported it, but I am still looking for a CSS fix that I can apply. Chrome is a popular browser.
I will add images that show what happens.
First, this is the vertical format on the screen:
Next, here is the horizontal image on the screen:
Now, here are both of them as printed:
Just for posterity: Chrome has since fixed this bug.
Related
I'm trying to create a website that has fullpage background images. I have gotten it work on desktop versions but when I push it to github and view it on my phone the background image is just a long image at the top. I'm using the background-size: cover in my css. Screen shots below.
How can I make it so on mobile it takes up the whole space? Thanks :)
Desktop version:
Mobile version:
.background1
{
/* Location of the image */
background-image: url(images/background-photo.jpg);
/* Image is centered vertically and horizontally at all times */
background-position: center center;
/* Image doesn't repeat */
background-repeat: no-repeat;
/* Makes the image fixed in the viewpoint so that it doesn't move when
the content height is greater than the image height */
background-attachment: fixed;
/* This is what makes the background image
rescale based on itscontainer's size */
background-size: cover;
/* Pick a solid background color that will
be displayed while the background image is loading */
background-color:#464646;
}
Html is as follows
<head>
<script src="https:
//ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"</script>
<script
src="https://cdn.jsdelivr.net/lodash/4.11.2/lodash.min.js"></script>
</head>
<meta charset="utf-8">
<title>Color</title>
<link rel="stylesheet" href="style.css">
<link href="animate.css" rel="stylesheet">
</header>
<body id="bodyID" class="background1">
</body>
<script src="javascript.js"></script>
The problem stems from your <body> element not having the height to fit your device. You could stick a height: 100% on html, body, but I think the easier way to do this would be to add the following:
body {
height: 100vh;
}
This sets the height of the body element to 100% of the viewport height on load. I tested this out and it solves the problem on my Android device and doesn't break it on desktop.
Side note: You can debug your Android device with Chrome inspector tools by following Google's instructions.
Have you defined the min-height or max-height or height? May be u can share the Html codes to let me check. And for the background css, here's the better useful code.
background: #464646 url(images/background-photo.jpg) no-repeat center center;
background-size: cover;
I have reduced the code for a site template down to this very basic page. Even in this basic state a small amount of side scroll is apparent when viewing on a mobile browser. This is tested on Samsung, default browser and Chrome.
It's not so much an issue on this demo but on the full template this side scroll adds a strip of blank page to the right hand side where the scroll bar is (underneath the scroll bar).
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
*{
margin: 0px;
padding: 0px;
}
#header{
width:992px;
margin:0 auto;
background-color:#000000;
height:90px;
}
</style>
</head>
<body>
<div id="header">
</div>
</body>
</html>
I want to eliminate the side scroll and have the page fit the screen exactly. As the site is fixed width and centred the width and margin CSS rules must stay.
Try to use overflow:hidden on the element that has the scroll if you want to hide that extra space that appears on mobile devices.
I have a page where the content is positioned in the center of the page using margin:auto and I want to add a background that is centered the same way but because of the background doesn't appear when I scroll down I have resorted to using position:fixed which nicely does the trick.
However, positioning it centrally the same way as the content is proving a huge challenge because playing with left:x% and margin-left:-y% is a nightmare and never quite works well that all screen resolutions.
The markup is simple:
<div id="main" class="container">
<div class="overlay"></div>
<div id="content"></div>
</div>
You can see the site HERE
The BEST CSS configuration I came up with is this:
.overlay
{
position: fixed;
top: 0; /* These positions makes sure that the overlay */
bottom: 0; /* will cover the entire parent */
left: 0;
width: 72%;
margin-left:14%;
height:100%;
background: #000;
opacity: 0.45;
-moz-opacity: 0.45; /* older Gecko-based browsers */
filter:alpha(opacity=45); /* For IE6&7 */
}
I've tried many combinations but the background always resized differently than the content and I would want it to stay in place.
Position:absolute with margin:auto works perfectly well except when you scroll down.
The above configuration works nicely except the "min-width". If I could get it to stop minimizing after a certain point, this would be perfect.
Many thanks in advance if you have a solution to this
you could use background-attachment: fixed for your background, instead of using empty markup for styling purpose. in this way you will see it even when you're scrolling down the page.
I have a website that uses an image as its background over the entire page. In order to do this, I am using the new CSS3 spec "background-size", which is set to "cover".
background-image: url(/images/House-Remodel-Ideas2.jpg);
background-repeat: no-repeat;
background-size: cover;
Generally speaking this works well, but I noticed that if the window starts to get too narrow (and this a fairly wide image, so even 1024x768 is "too narrow") then the image stop filling the page and instead I see the background color of the page.
This kind of destroys the look of the page. While I suppose I can get creative about both the size of the image and the overall design of the page, it would be nice if this worked as expected. I'm OK with the image spilling over or getting clipped, but I'm not OK with it being too small and leaving the page background showing.
Is there a way to set this up so that doesn't happen?
An example was requested, so... here is the image I'm using:
http://i.imgur.com/igLMC.jpg
And here is the HTML:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
background-image: url(house.jpg);
background-size: cover;
background-repeat: no-repeat;
background-color: red;
}
</style>
</head>
<body>
</body>
</html>
I put an obnoxious red background behind the image to demonstrate the problem. If it is working properly, you should NOT see the red. So run the above, and then resize the browser so that it is very thin, and tall. You will see lots of red under the picture. THAT's the problem.
As an update, upon more testing, removing the DOCTYPE seems to fix the problem. I am not smart enough to tell you why. :)
I haven't implemented a css-only way to do this, but I did use the backstretch jQuery plugin once, and it worked across the board. http://srobbin.com/blog/easy-full-screen-background-images-with-jquery/
Just set the height or min-height of the html:
html {
min-height: 100%;
}
body {
background-image: url(http://i.imgur.com/igLMC.jpg);
background-size: cover;
background-repeat: no-repeat;
background-color: red
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
yes another problem with this scroll bar
alright so I started the website over again that was mentioned here
and I am having problems with this scroll bar again
alright so all I have is a single image in a div tag
<div align="center" id="SuggestionBox">
<img src="images/SuggestionBox.jpg"/>
</div>
this code displays right but
when I make the browser window small enough that the full image can not be seen it doesn't give me a scroll bar to see the whole image
hopefully this makes sense
I am using firefox
EDIT:
I tried overflow:scroll and it did not work
this was the outcome
and this happened in the middle of the page
I also tried 'overflow:scroll' on the body of the page through css and all it did was show disabled scroll bars that did not change no matter the size of the browser
also some people are a bit confused
so
this picture might help
notice how the image is not fully shown
well, I want there to be scroll bars in case the user wants to see the whole image
but they're not appearing
also here is all my css code:
body
{
background-image:url("images/background.jpg");
}
a:hover
{
color:#FF0000;
}
table
{
background-color:#FFFFFF;
}
#SuggestionBox
{
position:relative;
right:375px;
}
thanks
Good Luck
get it?
I may not be understanding your question, but it looks like your problem is that you've disabled scrolling in the body but would like the div to scroll. #lukiffer's answer is right. When you resize your browser, however, the scrolling div, which is a fixed size, isn't overflowing because its content still fits.
Are you wanting your "SuggestionBox" div to anchor to the page so that it resizes along with the page? That would enable it to change sizes as the browser does and thus add scroll bars when its content doesn't fit:
#SuggestionBox
{
position: absolute;
/* Change these to establish where to place the div. All zeroes
means it fills its whole container */
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: scroll;
}
Update:
I don't get what #SuggestionBox is supposed to be. If you're just wanting a centered image link, you could get rid of the div and just have this as your markup:
<a id="SuggestionBox"></a>
And for that <a/>, you could have the following CSS:
#SuggestionBox {
display: block;
width: 100px; /* Or whatever the width is */
height: 100px; /* Or whatever the height is */
background-image: url(images/SuggestionBox.jpg);
margin: 0 auto;
}
If your reason for having the div was to give your link a right margin of 375px, your CSS could have the margin set to 0 375px 0 auto instead.
If you use this simple HTML/CSS, your body should be able to scroll normally (unless you have other CSS or HTML that you haven't posted that's breaking it).
div#SuggestionBox { overflow:scroll; }