I have a div with a specific size, which contains an iframe, sized 100%. This iframe loads an SVG-file that doesn't have height and width set, or is also sized 100%.
When zooming in IE or Chrome, everything is fine.
When zooming in Firefox, the following seems to happen:
The div is scaled up according to the zoom factor. The iframe is also scaled up because it fills out the scaled up div with its 100% size. The SVG in the iframe seems to be scaled up to fill the iframe, THEN the zoom factor is also applied to it so that it is now actually bigger than the iframe.
Example: https://jsfiddle.net/hz5ue94c/2/
<div class="wrapper">
<iframe class="frame" frameborder="0" src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/410.svg">
</iframe>
</div>
Is there a way to stop Firefox from zooming the SVG?
Edit: I'm not sure if the problem is with the iframe or the SVG. If I have SVG directly in the div, the problem doesn't seem to occur, but I need to load the file into an iframe.
Thanks in advance!
Related
OK, this is a weird one. I have two divs inside a container div:
<div class="ri-full-width-container">
<div id="map"></div>
<div class="ri-limited-width-container">
</div>
D3 is creating a GeoJSON map in the #map div. The other div sits on top of that background map. What's odd is that that overlay div's content (text and buttons) appear over the map, as expected. BUT the background color of the overlay is visible, but it's BEHIND the svg elements of the map.
I know that SVG renders based on when it's added to the DOM, but since they're in a div that appears earlier in the DOM and, more importantly, the rest of that overlay div is on top of the SVG just fine, can anyone explain why the background color is behind the svg elements?
Live code:
https://beehivemedia.com/dataviz/map_oddity/test_file.html
Screenshot of what I'm talking about:
This is a css issue,
from an answer here:
The issue here doesn't just apply to SVGs. It's to do with element positioning. Any positioned elements (position:absolute, position:relative) are displayed in front of any non-positioned elements.
Your .ri-limited-width-container has no positioning, so its background appears behind the positioned #map div while its child .ri-menu is positioned so it appears as intended.
Changing the .ri-limited-width-container positioning to relative should get you something like:
I created a set of small PNG files to hug the top and bottom of my website. By repeating themselves on the X-axis they span the entire width of the site and actively shrink and expand with the browser. This worked as predicted until the upper span was pushed to the right allowing another image (logo/button) to occupy the upper-left corner. This repeating image and the banner logo are a contiguous image so I'm doing my best to make it work as designed. I added this bit to my style sheet to nudge the repeating image over to the right:
left:650px;
This caused a horizontal scroll-bar to appear allowing access to a big-open-nothing at the right side of my site (it appears to be the same distance the PNG is being pushed over to). I believe this is called overflow? To constrain the overflow I added the following to the html, body tag in the style sheet:
width: 100%;
overflow-x: hidden;
This removes the scroll-bar in all the browsers I've tested (Chrome, IE, FF & Opera) but in most cases, side scrolling can still be invoked by clicking down on the center mouse button and activating the easy-scroll feature (I don't know the actual name of this feature, but hope you understand what I mean).
FF deactivates this mouse feature but still allows scrolling with the keyboard arrows. IE is the only browser that is working correctly.
I've looked all over for an answer but have only netted some possible solutions, but I don't understand how to implement or even how to describe them. Being a novice I suspect incorrect terminology is also hindering my searches. In any case, if you take a peek at my website:
http://www.cybergolem.com/indexWIP.php
BTW, my div nesting looks like this:
<body>
<div id="container">
<a class="homebutton" href="index.php">Home Page</a>
<div id="header"></div>
</div>
<div id="footer">
<div id="footNote"> — Thar Be Dragons Here — </div>
</div>
</body>
Thanks Much.
Back story: I have an SVG canvas with some polylines on it. I also have some HTML <span> and <textarea> elements that need to be positioned precisely in relation to those polylines.
I started by putting the HTML elements in the SVG in <foreignElement> tags, but I had a problem there because IE doesn't see them at all and Firefox doesn't see the <textarea>s. So I took them out of the SVG and now every browser sees them.
So far so good. Now the only way I know to make sure they position correctly with the polylines is to give both the HTML elements and the SVG canvas absolute positions with CSS.
Here's my problem. Above all these elements is a header div. I want the whole SVG business to sit at a reasonable distance below the header. Say 15px. But since the SVG is absolutely positioned, I need to know the height of that header div to get the SVG and related HTML elements into the right place.
I've tried jQuery's .height() method and some related methods. The problem with all of them is that Firefox and Chrome give two different results. I know this doesn't reflect a real pixel height difference between the two, because I can see visually that the header is slightly taller in FF, yet FF gives a smaller height reading.
How can I get a browser-consistent height reading for my header div? Or at least one that I can use to absolutely position other elements at the same distance below it in every browser.
You could try with this function
function getHeight() {
return Math.min(
Math.min(document.body.scrollHeight, document.documentElement.scrollHeight),
Math.min(document.body.offsetHeight, document.documentElement.offsetHeight),
Math.min(document.body.clientHeight, document.documentElement.clientHeight)
);
}
or simply with document.documentElement.clientHeight, which usually does the trick for me in all the browsers I use for testing (Chrome, Firefox, Safari and Opera)
[edit] The function above returns the width and height of the body, in order to use it for any div, use this one
function getHeight(div) {
return Math.min(div.scrollHeight, div.offsetHeight, div.clientHeight);
}
You can use it like this
var myDiv = document.getElementById('myDivId');
console.log('the height is ' + getHeight(myDiv));
[edit2]Keep in mind that the divs might actually have a different size depending on the browser.
Let's say this is google chrome and the green bar at top is the navigation bar, with a height of 75px. You have it at 100%, filling up your screen, who has 1000px height, and you place an 100 pixels div to the top and also stick an 100px div to the bottom of the screen (with blue). The purple div between them will have an 725px height.
And this below is firefox. It's placed on the same 1000px screen, also at 100%, but its navigation bar has 100px height. With the same 100px blue divs to the top and the bottom, the purple div will have a height of 700px here, different from chrome.
Of course, this is a very, very simple example and I doubt this is your case. But you might have a similar problem with div placements and it's something you should try to check.
Can anyone tell me how this image is resizing? If you remove the bg from the page with firebug you will have a clear vision of the image.
http://canvas.is/images/logo_solid.png
I notice that when the page is scaled the width and height attributes apply and start to scale the image. I have looked through the page and there is no css indicating a percentage width or height and no js in sight.
How is this working?
Thanks
I would tentatively say this is a browser built-in feature as the url ends with image extension, browser know it's not html page, so it would render it in a different way.
Well, I still do not think there is something magical out there, in a normal html page, if you set a fixed width to an image, browser will resize its height automatically. It's more like this scenario:
<div class="image-wrapper">
<img width="100%" src="..."/>
</div>
image would be resized per its original ratio with the width change of image-wrapper
We have a simple modal in our web application.
It's nothing special and is built on twitters bootstrap library.
It contains a backdrop that is a semi transparent white background with position: fixed and width and height set to 100%.
The modal itself, however, is not statically positioned but absolutely positioned, this is because the modal might be taller than the viewport and we don't want scrolling in the modal.
Here's the dilemma, when the backdrop is present the scrolling is far from smooth in Google Chrome, if I change the position of the backdrop to absolute everything is fine.
This has the obvious downside of not covering the entire page.
I tried to reproduce it with a JSFiddle but I couldn't (most likely due to the fact that we a lot more content on our site).
Nonetheless here is my attempt: http://jsfiddle.net/LdC4w/
So, any ideas?
Oh, and I can add that having a background image instead of opacity is not an option.