I have an SVG inside a div that I am trying to center by using absolute positioning. On IE11 the SVG is off-center though. When I remove the absolute positioning it appears that the starting point of the SVG is different on IE11 and Chrome. On IE11 the SVG is a few pixels further down the page then on Chrome.
I tried using a Flexbox solution instead of absolute positioning, but the same issue persists. Even when using align-items: center and justify-content: center, the IE11 version was a few pixels lower than the Chrome version.
This leads me to believe it is really not a positioning issue at all, but rather there is some fundamental difference between SVG display or positioning on IE11. I am using a VM to debug on IE11 but it is extremely laggy and pain-staking to develop on.
Is there some fundamental difference between display/positioning of SVG's on IE11? Can someone shed some light on this strange behavior?
jsFiddle
Also, here is a screenshot of the same code running locally on both Chrome and IE11 side by side:
EDIT:
It also appears like the SVG is off when I inspect it in IE dev tools:
Try to add preserveAspectRatio="xMidYMin meet" in your svg elenent (see https://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute for more info) and remove width and height attributes (see https://stackoverflow.com/a/9792254/895007).
Try the following:
position: absolute;
left: 0;
top: 50%;
transform: translate(0,-50%);
height: $desiredHeightInPixels;
width: 100%;
Related
I am trying to create a react component and position it on the page.
The component consists of multiple divs with position: absolute so that I can stack them on top of each other. The parent containing all these divs has position: relative and size 400px x 400px.
On firefox, everything works absolutely fine. However, on chrome or edge, the component renders but disappears off the viewport.
Edit:
Here is a jsfiddle of my code
When you access the jsfiddle using firefox, you can see concentric circles, when you access it using chrome, nothing shows up unless you disable position: absolute on the child components.
Research
From my research on this issue, this disappearing problem only occurs when the position: absolute children are unable to find a parent with position: relative, however this is not the problem for my implementation.
Trying using dev console on chrome, when I turn position: absolute off for all child components, the divs appear but no longer stack on top of each other.
Does anyone know why this is happening? How come it's only working on firefox, and is there any way to fix this so that the component can be viewed on all browsers?
Update
As per the accepted answer, the solution was to specify a width and height for the child divs containing SVGs. This is because for some reason some browsers do not automatically calculate width and height for SVGs. This is explained in the comments of this post, as well as in this post.
You need to give width to all circles as they become independent when you give them position: absolute. So modify your css code like this:
.child1, .child2, .child3 {
position: absolute; /* Turn off to see circles in chrome*/
top: 0;
width: 100%;
}
Thanks me later.
you just missed the width and height for child div `
.child1, .child2, .child3 {
position: absolute;
top: 0;
width:100%;
height: 100%;
}
EDIT: had originally said the wrong iOS version (it's basically the latest, 9.3.5)
EDIT: thanks to the kind soul who edited the question to include the snippet.
not sure why my chrome browser is not allowing editing of snippets in the question editor anymore.
First up:
I tried to make a stack snippet for this question, but unfortunately the snippets editor is not allowing me to edit any code in chrome on a chromebook. I'm not entirely sure why stack overflow don't just write a simple importer that converts a jsfiddle link into the stack snippet format. If the editor does not work, I am forced to resorting to much maligned cut and paste code and link question format.
Anyway the link for my fiddle is https://jsfiddle.net/vwm2opf7/1/
A "full screen" link for that fiddle is
https://jsfiddle.net/vwm2opf7/1/embedded/result/
(because my issue is a mobile web issue it's best just loading that second link to observe the problem).
The code portions are here
html {
font-size: 16px;
font-family: Arial;
}
body {
overflow: hidden;
}
#div_page_header {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 140px;
color: #FFFFFF;
background-color: #102339;
}
#div_image_banner {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}
#img_banner_pic {
width: 100%;
height: 100%;
object-position: top left;
object-fit: contain;
}
<body>
<div id="div_page_header">
<div id="div_image_banner">
<img alt="logo" src="http://www.graphicdesignbylisa.com/wp-content/uploads/generic-logo.jpg" id="img_banner_pic">
</div>
</div>
</body>
What I'm expecting it to see the logo graphic auto scaled,and inset 10px from the top left hand corner, and scaled to fit vertically to 10px from the bottom of the blue box, with the aspect ratio retained. basically exactly like this:
now in chrome on the desktop, it behaves correctly
on android chrome, it behaves correctly also.
using any browser (eg safari, chrome, opera, even the lastpass browser) on an iphone 4S running iOS 9.3.5, you get the logo image centered in the blue panel.
I'm assuming it a webkit issue.
I'm after a css-only solution to correctly position the logo, with scaling.
The reason for the 2 div approach, is i have found (in desktop at least) the only way to get the object-position to work correctly with an inset is to do this which then allows 100% to be used for width and height. even a calc (100%-20px) does not work properly. the reason for the inset is i'm using media queries to fine tune positioning for different sized screens. (not in this example, but i prefer to reduce example code to the bare minimum to show the problem, as in doing this it reduces complexity, and often I find the solution before finishing the question)
Yes, Safari 7.1-9.1 support object-fit but not object-position (see object-fit on caniuse)
No way around it other than using a polyfill like object-fit-images that will also fix object-fit in IE9+
I am trying to center svgs on top of each other. I am using the same method to position the divs and the svgs inside each other, but this is only working in chrome.
Following code is used to center:
position: absolute;
left: 50%;
top: 50%;
height: 100%;
width: 100%;
transform: translate(-50%, -50%);
This is how it looks like in Firefox:
The code can be found here.
Does anybody have a clue?
EDIT: I have found out what is happening: Firefox is applying the transform to the svg itself and thus moving the svg out of the viewbox. Have not found a solution yet.
Thanks!
I have now found the answer:
Firefox cascaded the translation onto the "use" tag and thus the position of the svg on the viewbox got translated. To counteract this i added the css rule:
use{
transform: translate(50% 50%)
}
Feel free to add any insight as to why this is happening.
I am having a lot of issues absolutely positioning a div called id="verticalGenesis" on the following website: http://genesispetaluma.com/index.html in a mobile browser, including both Safari and Chrome on the iPhone. I ideally am trying to position a logo to appear at the right of my screen using the following css:
#verticalGenesis {
background-image: url("../img/Genesis%20Text.gif");
background-repeat: no-repeat;
display: block;
height: 570px;
opacity: 0.8;
position: absolute;
right: 3%;
top: 70px;
width: 123px;
}
This displays fine in all desktop browsers, just as I am expecting, but is appearing in the middle of the screen on mobile browsers. I have experimented with using right: 3% as well but I am having the same issues.
I am sure that there must be a simple answer to this problem but I have searched everywhere on the web and stackoverflow and I can't figure this out. Could someone please point me in the right direction?
Thanks,
Chris
This won't completely fix your issue but it will get you closer. On the parent div id=wrapFix you should add position: relative to it. The problem is that when you have an element with position: absolute it needs to know what it should be absolute against. While it worked fine on desktop browsers it broke on mobile. Probably because of screen size or something. But I've added that line to that div and it seems to be a lot closer to fixing the issue on iPhone.
View this jsFiddle in a WebKit-based browser like Chrome or Safari and then compare it to what you see when you view it in a non-webkit based browser like Firefox or Internet Explorer.
You will see that they're obviously not the same. Below is Chrome on the left and Firefox on the right:
The reason for this is that the fallowing small CSS markup is interpreted differently by WebKit compared to how every other browser interprets it:
span.upArrow.menu{
margin: 36.1% 0 0 12.5%;
}
More exactly: WebKit interprets 36.1% not as 36.1% of the page width but rather 36.1% of the element width or height.
The reason for using percentages in the first place is because the site scales up and down depending on the scale of the screen. This piece of code is for the menu. So the site as it is now looks fine if you use the default browser on an Android or iPhone. But there's a huge ugly triangle in the middle of the content on a Windows phone or if the user uses Opera or Firefox.
So my question then becomes. Is there any way to work around this bug in WebKit?
If it's possible one could write separate markup for webkit and non-webkit browsers. But perhaps even better would be to find a solution which works in both cases.
Take a look at this fork.
I've changed the approach slightly, setting the menu items to position: relative and positioning your arrows rather than adding a margin to achieve the layout.
Here's the updated CSS (remove the additional div and span from the selectors, they aren't necessary):
.menuButton{
display: inline-block;
width: 32%;
padding: 2% 0;
position: relative;
}
.upArrow.menu{
bottom: 0;
left: 50%;
margin-left: -15px;
}
The negative margin matches the border width of your arrow, ensuring it will always be in the exact centre whatever else happens with your layout.
That is happening because, arrow span doesn't have proper position. make that span position as absolute and the menuButton as position:relative.
div.menuButton{
display: inline-block;
width: 32%;
padding: 2% 0;
position:relative;
}
span.upArrow.menu{
position:absolute;
bottom:0; left:45%
}
DEMO