I am implementing google maps on my website and I just started noticing this line appearing. It only happens in Chrome (Windows) and no matter how far I step back in my code I can't seem to make it disappear. As you zoom out, the line randomly renders elsewhere in the viewport, generally on the right side.
Any thoughts on what may be causing this?
Here is the CSS I have applied to the map_canvas:
#map_canvas img {
max-width: none!important;
}
#map_canvas {
height: 100%;
width: 100%;
position: absolute;
}
/** Make the map responsive to the container **/
.map-container {
height: 0;
position: relative;
padding-bottom: 80%;
margin-right: -3%; /*compensation for margin0 on span9*/
}
And here is the basic HTML structure of the map canvas item.
<div class="span9">
<div class="map-container"> <!-- container needed for responsiveness -->
<div id="map_canvas"></div>
<div class="hidden-phone">
<ul>
<li onclick="toggle()">Restrooms</li>
<li onclick="toggle()">Handicap Access</li>
</ul>
</div>
</div>
</div>
I had the same problem on chrome, i switched to the version 3.14 and this solved the problem
if you include the script for google like this it should solve the problem
<script src="http://maps.googleapis.com/maps/api/js?v=3.14&sensor=false"></script>
It was a zoom issue for me on chrome.
Can you check your browser zoom? This is often an issue when the zoom puts the tiles at non-integer pixel coordinates. You can reset the zoom by hitting ctrl-0.
This issue has been confirmed on GMAP-API_Issue V3(here).
Although widely reported as white lines issue, the color of these erroneous lines is the map's backgroundColor : selected on map option.
btargac solution worked for me.
<script>src="http://maps.googleapis.com/maps/api/js?v=3.14&(KEY=****)&sensor=false"></script>
Thanks
I am also seeing this problem. It seems to appear whenever a vertical scrollbar is displayed. Tom's above answer removes the scrollbar, but that might not be a viable solution for most people. This is most likely a Chrome bug. They've made a lot of changes to the scrollbars over the past months, so this isn't surprising.
Same issue here. I've come to the conclusion it is a Chrome bug. It's only shown up in the past week or so. It only occurs if you have a map centred. Here's how to reproduce the issue.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html,body { height: 100%; width: 100%; margin: 0px; padding: 0px; overflow: hidden;}
#map-canvas { height: 600px; max-width: 800px; margin: 0 auto; }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=&sensor=true">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
You should see a centred map. If you resize your browser slowly the horizontal lines come and go. If you remove the margin:0 auto from #map-canvas the map aligns left and the lines are gone.
Alternatively, add max-width: 100% to #map-canvas and you'll have a full width map and no lines. So, it's only centred maps which affects a lot of responsive sites.
For me, the random horizontal white lines went away when I set the zoom level to an integer value (rather than a decimal value).
Related
I have been trying for days to center a position:fixed element, a lot of solutions all around the web have been found and yet, either due to inefficiency or my own inexperience, none of them worked.
The scenario is as follows; I want to make an image visor, whenever you click a image a fixed div is made visible, holding said image, this is actually done via JavaScript.
The problem occurs when I want to center the div, no matter which resolution you are using.
#galleryimage{
position:fixed;
z-index:200;
display:none;
max-height: 100%;
max-width: 100%;
}
#galleryimage img{
max-width:100%;
max-height:100%;
}
The images' width and height are unknown variables, I am not experienced enough with JS to handle it, so I wanted to do it with pure CSS. However, I never could get it centered.
Margin just won't work, and the formula with negative margin won't either, as I do not know the width and height variables of these images.
Any solution?
I would use JavaScript + jQuery for this, to make life easier. Here's a good starting point for you:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<style>
#galleryimage{
position:fixed;
z-index:200;
height: 100%;
width: 100%;
opacity: 0;
}
#galleryimage img{
position: absolute;
left: 50%;
top: 50%;
}
</style>
<body>
<div id="galleryimage">
<img src="" />
</div>
</body>
<script type="text/javascript">
$(document).ready(function(){
loadGalleryImage('your_image_name.jpg');
});
function loadGalleryImage(src){
$("#galleryimage img").on('load', function(){
$(this).css({marginTop: -($(this).height()/2), marginLeft: -($(this).width()/2)});
$("#galleryimage").animate({opacity:1}, 200);
$("#galleryimage img").off('load');
});
$("#galleryimage img").attr('src', src);
}
function hideGalleryImage(){
$("#galleryimage").animate({opacity:0}, 200);
}
</script>
</html>
This uses a few techniques. In CSS the image is absolutely positioned and placed at the 50% point for both top and bottom. Then, using jQuery, once we know the image is loaded, we can determine its width and height, and shove it left and up by half those values. That places it directly in the center of the screen. I added some animation stuff in there for prettiness :)
You can use display:table-cell to vertically align something in the middle. You have to get the div to stretch to 100% of your fixed position div though. I have made a quick jsfiddle:
http://jsfiddle.net/fm2GD/2/
Basically you have to have the image in a table cell:
#tableCell{
height: 100%;
width: 100%;
display:table-cell;
text-align:center;
vertical-align:middle;
}
which is in a "table" :
#table{
height: 100%;
width: 100%;
display:table;
}
which covers 100% of your fixed position div.
I would like a responsive page which contains canvas elements inside a div. I should be able to simply wrap a canvas element inside another block element, and give that canvas a relative width. Although this method works in Chrome, Firefox, Safari, and Opera, or course IE has to be the fly in the ointment! I'm not even trying versions older then IE9--this simple code example does not work as expected in IE9:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test IE9 Canvas Height</title>
<style>
body {
margin: 0;
padding: 0;
}
#container {
position: relative;
padding-top: 32%;
background-color: #88f;
}
.instruments {
position: absolute;
bottom: 0%;
width: 100%;
padding-bottom: 16%;
background-color: #8f8;
}
#circle {
position: absolute;
left: 42%;
width: 16%;
}
</style>
</head>
<body>
<div id="container">
<div class="instruments">
<canvas id="circle"></canvas>
</div>
</div>
<script>
var canvas = document.getElementById("circle");
var ctx = canvas.getContext("2d");
// Default canvas is 300x150, so make it square
canvas.height = canvas.width;
ctx.beginPath();
ctx.arc(canvas.width / 2, canvas.height / 2, canvas.width / 2, 0, 2 * Math.PI);
ctx.fillStyle = "red";
ctx.fill();
</script>
</body>
</html>
This simple page should render a blue block of height 32% of the body width, and then have another block in green overlapping the bottom 1/2. Inside the inner div is a canvas element which does not explicitly set the height and width--so that it can remain fluid for various window/body widths. The canvas should draw a round red circle, with the height completely contained within its containing div. Works great in every other browser except IE9 (and except IE10 too I think).
Even if I do specify a canvas size,
<canvas id="circle" width="300" height="300"></canvas>
it still doesn't work.
Is there something I am doing wrong, or is there a better method to achieve this goal? I do not want to style or code pixel or point sizes, and would prefer to avoid a javascript IE hack. Thank you
Honestly your tone about IE being bad again makes me not want to help you all that much. Dial it down next time.
Your behavior here is kind of undefined, because canvass nature is to "stretch" their content and there is nothing in your code keeping your canvas square so no reason for it to scale evenly... You can see this for yourself by giving the canvas a background color... the short version is add:
height: 100%
to the canvas' css to make it work the way you want it to... hope this helps -ck
UPDATE:
I read your comment and you don't seem to understand that setting the canvas.width and canvas.height only changes the size of the internal "drawing surface" of the element. When you set the element's style (the default is auto) you are setting the display surface's dimensions. The problem that you are running into is that you are expecting the browser to preserve the canvass internal dimensions when one of it's style dimension members is set to auto and the other is not, like how it works with an img tag. Chrome & Firefox seem to behave this way. IE however is just letting your actual dimension come through, so in your case its as if you set the height to 300px. I'm not sure if there is a "spec correct" approach to this yet, but it seems like all implementations are converging on your preferred behavior.
Anyhow, the solution to your problem is to use an img tag since that tag will behave correctly and just use a data uri to get your canvas image into it:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test IE9 Canvas Height</title>
<style>
body {
margin: 0;
padding: 0;
}
#container {
position: relative;
padding-top: 32%;
background-color: #88f;
}
.instruments {
position: absolute;
bottom: 0%;
width: 100%;
padding-bottom: 16%;
background-color: #8f8;
}
#circle {
position: absolute;
left: 42%;
width: 16%;
}
</style>
</head>
<body>
<div id="container">
<div class="instruments">
<img id="circle" src=""/>
</div>
</div>
<script>
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
// Default canvas is 300x150, so make it square
canvas.height = canvas.width = 300;
ctx.beginPath();
ctx.arc(canvas.width/2, canvas.height/2, canvas.width/2, 0, 2 * Math.PI);
ctx.fillStyle = "red";
ctx.fill();
var img = document.getElementById('circle');
img.src = canvas.toDataURL();
</script>
</body>
</html>
That will give you the effect you were looking for without need for any further hacks...
On a side note, your css technique of using padding to "size" an element with a percent is a little fragile (like all % based css techniques). If I were using a % based css layout, I would probably using something like this:
<style>
html, body {
margin: 0;
padding: 0;
height:100%;
}
#container {
height: 33%;
background-color: #88f;
}
.instruments {
height:50%;
background-color: #8f8;
position:relative;
top:50%;
}
#circle {
display:block;
margin:auto;
width:auto;
height:100%;
}
</style>
you can see the full thing (with modified css) in action here: http://jsbin.com/ajoTUZA/2/quiet
I hope that this helps -ck
I want all (or just some) of my images getting resized automatically when I resize my browser window.
I've found the following code - it doesn't do anything though.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
<div id="icons">
<div id="contact">
<img src="img/icon_contact.png" alt="" />
</div>
<img src="img/icon_links.png" alt="" />
</div>
</body>
</html>
CSS
body {
font-family: Arial;
font-size: 11px;
color: #ffffff;
background: #202020 url(../../img/body_back.jpg) no-repeat top center fixed;
background-size: cover;
}
#icons {
position: absolute;
bottom: 22%;
right: 8%;
width: 400px;
height: 80px;
z-index: 8;
transform: rotate(-57deg);
-ms-transform: rotate(-57deg);
-webkit-transform: rotate(-57deg);
-moz-transform: rotate(-57deg);
}
#contact {
float: left;
cursor: pointer;
}
img {
max-width: 100%;
height: auto;
}
How can I basically have a fullscreen design (with background-size: cover) and have div elements be at exactly the same position (% wise) when resizing the browser window, with their size also resizing (like cover is doing for the background)?
To make the images flexible, simply add max-width:100% and
height:auto. Image max-width:100% and height:auto works in IE7,
but not in IE8 (yes, another weird IE bug). To fix this, you need to
add width:auto\9 for IE8.
source:
http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries
for example :
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
and then any images you add simply using the img tag will be flexible
JSFiddle example here. No JavaScript required. Works in latest versions of Chrome, Firefox and IE (which is all I've tested).
image container
Scaling images using the above trick only works if the container the images are in changes size.
The #icons container uses px values for the width and height. px values don't scale when the browser is resized.
Solutions
Use one of the following approaches:
Define the width and/or height using % values.
Use a series of #media queries to set the width and height to different values based on the current screen size.
This may be too simplistic of an answer (I am still new here), but what I have done in the past to remedy this situation is figured out the percentage of the screen I would like the image to take up. For example, there is one webpage I am working on where the logo must take up 30% of the screen size to look best. I played around and finally tried this code and it has worked for me thus far:
img {
width:30%;
height:auto;
}
That being said, this will change all of your images to be 30% of the screen size at all times. To get around this issue, simply make this a class and apply it to the image that you desire to be at 30% directly. Here is an example of the code I wrote to accomplish this on the aforementioned site:
the CSS portion:
.logo {
position:absolute;
right:25%;
top:0px;
width:30%;
height:auto;
}
the HTML portion:
<img src="logo_001_002.png" class="logo">
Alternatively, you could place ever image you hope to automatically resize into a div of its own and use the class tag option on each div (creating now class tags whenever needed), but I feel like that would cause a lot of extra work eventually. But, if the site calls for it: the site calls for it.
Hopefully this helps. Have a great day!
The following works on all browsers for my 200 figures, for any width percentage -- despite being illegal. Jukka said 'Use it anyway.' (The class just floats the image left or right and sets margins.) I can't imagine why this isn't the standard approach!
<img class="fl" width="66%"
src="A-Images/0.5_Saltation.jpg"
alt="Schematic models of chromosomes ..." />
Change the window width and the image scales obligingly.
I want to make a header div (like a banner) fixed only when the header is trying to go out of the screen as the user scrolls down. Is it possible to do without using JS? For an example in Facebook timeline, if we scroll down a banner floats up as soon as the page's header goes out of the screen. My question is, is it possible to do with only CSS?
In case it is not clear enough, I want to know whether a style "position: fixed" can be applied conditionally like when 80px of the page is scrolled.
Yes. You can do it with just CSS. This is done by having a normal scrolling header, placed above a fixed one, which shows up only after the normal one scrolls up above it. This is kind of how http://techcrunch.com is doing it.
Update [10/31/2013] - Techcrunch changed their UI recently so you cannot see this there anymore!
Check this demo: http://jsfiddle.net/WDnyb/2/
HTML
<div class="header">Header</div>
<div class="outer">
<span class="banner">LOGO</span>
<div class="header">Header</div>
</div>
<div class="content">Content</div>
Relevant CSS
.header {
width: 100%;
position: fixed;
top: 0;
bottom: auto;
}
.outer {
position: relative;
height: 100px;
}
.outer .header {
position: absolute;
bottom: 0;
z-index: 2;
top: auto;
}
.content {
height: 1500px;
margin-top: 100px;
}
This can now be done properly and without javascript with position: sticky.
Refer to https://css-tricks.com/position-sticky-2/ for examples.
warning: At the moment of writing, it is not supported on IE11, opera mini, and android's stock browser: https://caniuse.com/#feat=css-sticky
It is not possible using css. You can do using JavaScript or jQuery. Because it need some conditions.
Html----included my content within
<header1>
..............
</header1>
JS
<script>
$(document).ready(function() {
var $header1 = $("header1"),
$clone = $header1.before($header1.clone().addClass("clone"));
$(window).on("scroll", function() {
var fromTop = $("body").scrollTop();
$('body').toggleClass("down", (fromTop > 200));
});
});
</script>
i have used above script to make a header fixed,its working fine in googlechrome not in firefox.....
I'm trying this technique on a page. Used it before and it seemed to work fine, but now in Chrome and Firefox, no horizontal scroll bar is displayed (which is good) but horizontal scrolling still occurs on two-finger swiping (which is bad).
I found this bug report which describes the same behavior, but is marked resolved. I tested in Safari, and horizontal scrolling was prevented.
The code (virtually identical to the code from the CSS-Tricks example):
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style>
body {
overflow-x: hidden;
}
h1 {
position: relative;
background: hsla(0,0%,0%,0.8);
color: white;
width: 90%;
margin: 0 auto;
}
h1:before, h1:after {
content: "";
position: absolute;
background: hsla(0,0%,0%,0.8);
top: 0;
bottom: 0;
width: 9999px;
}
h1:before {
right: 100%;
}
h1:after {
left: 100%;
}
</style>
</head>
<body>
<h1>Title of Page with full browser width bars</h1>
</body>
</html>
Any help greatly appreciated.
EDIT: Adding in overflow-x to the html element does prevent horizontal scrolling, but sometimes leads to other display errors (on a more fleshed out page I made, a dropdown menu kept getting cut off, even though that should be an overflow-y thing) and doesn't explain why the scrollbar isn't there, but scrolling still works.
I know this question was asked a long time ago but hopefully this helps somebody. Try adding the overflow-x hidden style to the html tag as well, for example:
html, body{
overflow-x:hidden;
}