I noticed today a strange behavior of Firefox, which I can not explain. An element (img) which is inside a div box and has a height : 50% will not be half the size of the parent.
Instead it has a size of only 2 - 3 px (the parent is at least 80px high at my resolution). In Chrome everything is displayed as expected.
HTML Code:
CSS:
Have also searched for this behavior on google. The only thing I found was a firefox setting (about:config browser.enable_automatic_image_resizing) for automatic scaling of graphics. But this did not fix the problem.
Thanks for your help!
Related
I want to apply a zoom factor to the entire body of a webpage via CSS (or JS if CSS-only is not possible). This would be easy in any modern browser, I can just use a CSS rule like:
body {zoom: 75%;}
This works correctly in Chrome, as you can see in these screenshots: the original page:
scales correctly in Chrome:
However, unfortunately I have to support IE 11 :/
And the same solution doesn't seem to work in IE 11: as you can see, applying a zoom factor to the page body doesn't scale the contents, it resizes the body element itself, making it smaller:
I tried compensating by changing the size of the body to something higher than 100%, but while this brings the body back to full size, it also disrupts the page layout (elements start overlapping/separating in weird ways)
EDIT: various comments suggest using scaling, but I already tried using
transform: scale(0.75);
but this doesn't give the result I want in either Chrome or IE. With scale I obtain a result similar to screenshot 3 in both browsers, the only difference being that in this case the body is centered with a white rectangle around it, instead of anchored to the top-left corner (which I assume is because I'm not using transform-origin: top left, if I also add that I obtain exactly the same result as in screenshot 3).
Is there any way to do this in IE? Ideally I would like to have the same behavior as if the user actually zoomed the browser window using CTRL+ or CTRL- (which does work correctly in IE, and gives me the same result as in the 2nd screenshot)
EDIT 2: sample page where you can test this, just press F12 and try to apply a zoom < 100% to the body element. In chrome the entire page will scale, in IE the body will shrink instead (ps: on my PC this page makes the IE dev tools hang for a few seconds when you open them, but just wait a bit and they will start responding again)
I've been battling with this simple issue for a while and I'm looking for some help...
I'm trying to make a full width colour banner that spans the full width of the page, but doesn't in any way affect the browser viewport sizing. I want it to be visible to human eyes, but I don't want it to affect the size/location of the browser's start view or scrolling behavior... just like it's not really there.
I also want to be able to place the banner in-line in the HTML.
Here is my test page: http://www.tanatu.com/widthtest
The Green Banner works perfectly, but it's y-location is defined in CSS (which is a pain)
The Pink Banner is my best guess so far, and works as intended on Chrome, but not on Safari on iOS, where the viewport is skewed to one side
Safari iOS Positioning Issue
Correct Positioning
I've been playing with this for months so any help would be MASSIVELY appreciated! :0)
Thanks!
Because you are trying to break out of your parent container that is where your challenge is. You can do this a few ways but I think the easiest without completely changing your markup would be to use a combination of viewport width units and calc()
If you change these attributes on #widthtest4 it should work:
#widthtest4 {
width: 100vw;
margin-left: calc(-50vw + 426px);
}
I'm using the xeon Bootstrap template (http://shapebootstrap.net/preview/?id=64). Firefox on a Mac renders the margins close to the edge of the window. Safari, using a window that is exactly the same size, renders the margins much wider.
Two questions: Why is this? How can I configure Bootstrap to be more consistent across browsers?
Thanks.
I'm not on a Mac so I cannot verify what I'm about to suggest. A screenshot might be helpful or a link to the page. There is not a lot to go on here, hence the lack of answers, but I'll give it a shot.
I'm assuming the issue is with the browsers and not Bootstrap or some sort of perception of difference that is not fully understood.
What exactly do you mean by "is exactly the same size"? Are both browsers maximized? Did you manually re-size them so the top, right, bottom and left edges line up? If so, that doesn't mean the viewports are the same size. Each browser has it's own chrome, UI elements (scrollbar) and etc., that can be different sizes and which will affect the viewport size.
The .container element's margin is set to auto which the browser automatically calculates for set width elements like .container. Bootstrap's .container class has specified widths for various viewport sizes. You might be viewing your page at a viewport width that is very close to a breakpoint and the right scrollbar (or something similar) is slightly smaller/larger in one browser than in the other. This in turn could trigger the page to render at a different widths giving the appearance of different margins.
For example:
Bootstrap has a breakpoint at 992px.
If your viewport width is 995px in Firefox, Bootstrap would render .container at 970px.
If your viewport width is 990px in Safari, Bootstrap would render .container at 750px.
Based on this suggestion of it being a breakpoint issue I would find out what each browser's viewport width is exactly. Then make sure you set them to the same width. If you get the same result/issue, then you will know it is not a breakpoint.
Additional information would be helpful.
Hopefully this points you in the right direction.
First off, this is not the zoom issue that I've seen in other questions. Also, I'm testing this using an iPhone 4, running iOS 6. In working on a mobile project, I discovered an issue with the viewport tag and mobile safari. I distilled everything into code as basic as I could get it. I have there parameters set:
width=device-width
height=device-height
initial-scale=1.0
maximum-scale=1.0
user-scalable=no
It all works fine, until you rotate the screen. Nothing gets resized, and a black bar appears on the right side to fill in the gap (see screenshots). If I remove height=device-height completely, the problem goes away. However, I do need to use this parameter. Otherwise, I will have to ask a different question.
After rotating back to portrait mode, that black bar remains, and I can scroll left and right. This is a very strange issue. Removing width=device-width does something else unexpected. I have the code here if you would like to try it: http://toastd.net/viewport.html
Here are some screenshots:
Here it is working fine in portrait mode:
When rotated to landscape mode
Then rotated back into portrait mode
The meta tag will help define rules for the viewport but you still need to apply visual styling to address the change in orientation. Give these CSS values a try:
body { width: 100%; height: 100%; }
If you'd like a good resource to help continue your project, PhoneGap has a starter app on GitHub that you can fork.
PhoneGap Start
I believe this is a bug on Safari, but I figured out a way to work around it. It has to do with certain elements and their styles. By process of elimination, I narrowed it down to a few "offending" HTML elements. Deleting width: 100%; from some elements and CSS styles, as well as other static widths like width: 120px; would start to get reduce problem. I say "start to reduce", because the margin on the right became smaller, but didn't go away completely. I then started playing with other CSS attributes like margin and padding. After getting rid of some left and right padding from some elements, the problem finally went away. But this wasn't really acceptable, as those styles were there for a reason.
The solution was to wrap everything in a container element, size that appropriately, and set overflow: hidden; in CSS. Setting overflow: hidden; to the body or html tags would work too, but that did funky things with vertical scrolling in Mobile Safari. In my case, there was already such a container element, so all I had to do was add the overflow property to it.
Like I said, I think this is a bug in Safari. When you rotate from Landscape to Portrait, everything should be resized back to fit portrait mode. Visually, everything does look like it was resized properly. However, Safari must have thought something wasn't resized properly, so it displayed the page wider than it really was. This works just fine in Chrome on an Android device. I also added different background colors and borders to highlight which element might be causing the page to stretch beyond the width of the device screen. Visually, there was no apparent culprit.
If you're thinking it might be a width: 100% plus padding issue, I had the same thought. But then deleting either the width or the margin/padding alone should have fixed the issue, which it did not. Not a single element was sitting beyond the edge of the screen. There was nothing but empty space there.
It works in IE and Safari but breaks in Chrome. You can view the page here http://www.archemarks.com.
It only breaks at a middle zoom point so you have to zoom in and zoom out and at this middle point the table breaks.
This made me think it was something minor that as the browser re-drew the page..the changing pixels available caused it to make something bigger than normal...or smaller and broke the layout.
Chrome has development tools which should make all of the CSS and HTML available.
I tried fiddling witht the size of the text in put box and the containing column and row..but this did not help as I was only guessing.
Any non-guessing advice.
I can repost the code but it might be easier to just view the site using Chrome Development Tools
It's the width of your .t2_c1 rule. At only 100px, it isn't wide enough for the Email Again text. this is undoubtedly because of the font size conversion being just slightly off as the browser compensates for the zoom. Changing the .t2_c1 rule width to 110px and then the .t2_c2 width to 250px fixes this issue.