Above image indicates the problem - the three boxes have a 1px border around them which doesn't entirely show when on 100% zoom on mobile chrome. The version of Chrome being used is 34.0.1847.114.
There's nothing special about the Css being used:
background: #FBFEFF;
border: 1px solid #3BA8E7;
padding: 5px 6px;
font-size: 14px;
outline: none;
I suppose you already solved it by now, but the lack of answers bothers me. It seems that 1 pixel border is lost in scaling because of fallback width (google developer).
Add viewport information on pages so that devices have correct scaling information:
<meta name=viewport content="width=device-width, initial-scale=1">
Related
I have a website that requires a 'bottom right' background image alignment, along with a background colour of #000.
My css tests okay on all OS and browsers I've tried so far (chrome, ie, moz, safari) except for chrome on android, which renders the background image outside the browser window.
Other image alignments work fine - the problem seems to be only with bottom right alignment, and only with chrome on android.
Problem page url: Features a background-image: bottom right alignment
CSS as follows:
body {
box-sizing: border-box;
margin: 0;
padding: 0;
font-size: 1em;
background: url("../images/bg_prices_XL.jpg");
background-size: contain;
background-color: #000;
background-repeat: no-repeat;
background-position: bottom right;
background-attachment: fixed;
}
If I change alignment to background-image: top right; then the problem goes away.
Page renders properly on android moz. Do I therefore need to include a -webkit specific alignment?
Havd tried adding:
html,body {
height 100%;
width 100%;
}
...but no luck. Viewport size already set to device size, Chrome seemingly is rendering oitside the viewport anyway, below the footer.
Tried styling the background-image under html section of css, but didn't work.
All thoughts welcome.
I have inspected the page throught chrome dev tools. I think if you remove background-attachment: fixed; propery it will work.
...never mind folks. I made the background a fixed, 100% height and width div, with a negative z-index. It feels like a clunky workaround to me, but it seems to work. Any better suggestions though would be appreciated thank you.
I experienced a weird bug in Android´s (6.0.1) Chrome Browser (54.0.2840.68) when it comes to text-shadow rendering with large fontsizes and blur. It was also reported to appear in MacOS Chrome although i could not reproduce it.
I condensed the problem into a small pen for further investigation:
http://codepen.io/quarkus/pen/BQaBGj
This is, in short the styled headline i am trying to render.
h1 {
font-family: sans-serif;
text-transform: uppercase;
font-size: 60px;
margin: 0;
color: white;
line-height: 1.2;
}
h1.shadow {
text-shadow: 0 0 0 transparent, 0px 0px 40px rgba(0, 0, 0, 1);
}
The classes .filter, .fix3d and .fix are just attempts to fix this problem by rendering the headlines in a 3d context (or by creating the shadow as a blurred :before).
This is how it looks an most android devices:
s.codepen.io/quarkus/debug/BQaBGj on the device
Has anyone ever experienced that kind of rendering and can point me to a solution ?
Thanks
Markus
EDIT: forgot one thing. it occurs only if the page is "scaled" either by the user itself or by stting an meta-tag like:
<meta name="viewport" content="width=device-width, initial-scale=1">
as it is in the pen.
I'm definitely getting this on Browserstack devices (Galaxy and Nexus phones), I've not seen it on a device, but I don't have tons of devices to check.
However what fixed it for me was transforming and blocking the text:
.text {
transform: translateZ(0);
display: inline-block;
}
Not an excellent fix as I need my text to display: inline but it works.
I'm creating small web-site, that contains forms with some text-inputs. I'm using this meta tag:
<meta name="viewport" content="width=device-width" />
to display some elements correctly on mobile device. I'm checking it using Android Chrome.
It causes problem: my border of form(simple div) and borders of text-inputs become very thick, but it is set 1px. So, this is form without meta tag:
And this is form with meta tag:
So, the first question is:
How to prevent 1px increasing with device-width meta-tag?
Also, as we can see, top and bottom padding are different for text-inputs and even for button(which is div, but not submit-input!). It is more visible on second image. I've understood, that it is caused by Android typing-underlining(at least for text-inputs). When you start typing word it is underlined for auto-correction or smth like that.
In first situation underline-width is also one pixel, so difference isn't so bad(but I want to fix it too). In second it is also thick, so there is big difference:
So, logical question is:
How to prevent underlining-width increasing with device-width meta-tag?
And of course, I don't understand.
WHY does this increasing mechanism affects simple div's??? There is no typing inside
This is div code:
<div id="form-submit">ЗАБРОНИРОВАТЬ</div>
div#form-submit {
display: table;
margin-bottom: 1em;
border: 1px solid black;
background-color: white;
outline: 0px;
font-size: 0.24em;
font-family: inherit;
padding-left: 0.3em;
padding-right: 0.3em;
padding-top: 0.5em;
padding-bottom: 0.5em;
border-radius: 0.7em;
margin: 0 auto;
margin-bottom: 1.6em;
cursor: pointer;
}
Finally, you can see difference between the second and the third image. When I started typing, button text moved to center a little bit...
It will be great, if somebody give explanation of any issue...
Your problem is that your site is not tailored for mobile devices, but you are trying to view it on a mobile.
Mobile devices have a .. let's call it a feature, where, upon selecting an editable field such as an input box, it will zoom in on that section (so you can read the text you are typing.) If your mobile did not do this automatically, with how your page has been coded, you are unable to read the text.
You can stop mobiles from zooming in by editing your <meta /> tag:
<meta name = "viewport" content = "width = device-width, user-scalable = 0, initial-scale = 1.0, maximum-scale = 1.0" />
This tells the browser:
Set the initial width to the viewport width (width of the screen.)
Do not allow the user to zoom the page
Set the initial zoom of the page to 100%
Set the maximum possible scale of the page (initiated by browser or user) to 100%.
The last property is the one that will prevent the mobile from zooming in on the text fields.
However, you ought to make your website mobile compatible, if you want people to view it on a mobile, but not allow them to zoom in. Not allowing them to zoom in, on a for-desktop designed site, is bad practise.
Google responsive design for ideas and techniques to retrofit your desktop design to be mobile friendly.
I have made very basic page, here is the HTML code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test Page</title>
<style>
#Canvas {
width: 1400px;
background-color: #09F;
position: relative;
margin-left: auto;
margin-right: auto;
}
#SiteHeader {
width: 1200px;
background-color: #CCC;
height: 165px;
margin-right: auto;
margin-left: auto;
margin-top: 15px;
border: 5px solid #F0F;
}
</style>
</head>
<body>
<div id="Canvas">
<div id="SiteHeader"> Why does this not fit in the screen? </div>
</div>
</body>
</html>
Just a simple #Canvas div to hold the content, and then a #SiteHeader div with a border around it. Here is a link to it:
The problem: When this page is viewed in a browser such as IE 11 on my Windows 8 RT tablet, the page does not fit the screen. When I say fit I mean that it should appear zoomed out so that I can see the entire page. I have to scroll horizontally to see the entire page.
I tried to use <meta name="viewport" content="width=1400"/> which seems to work for Android but not IE in Windows 8 Metro app.
I want the full 1400px width to appear on the screen even if the resolution of the screen is not that wide. It just needs to load zoomed-out but for some reason this page doesn't. Please can anyone suggest why?
You need to use this way, so that whatever the page size is given, that won't be changed by the viewport.
<meta name="viewport" content="width=device-width, user-scalable=no">
But in this case, there will be scrollbars in the small devices. Try it out yourself.
Okay, I think I figured it out.
Although these other website do have wrapper divs which far exceed the width of most devices, the actual content is inside a div which is less than 1080px wide.
My Windows 8 tablet has a resolution of 1920x1200. So when I rotate to view in portrait mode (display width of 1200px), it appears as if the website has shrunk (or been zoomed out of) to fit, but its not. Its just the extra background detail in the wrapper div has been chopped off, but the content still fits in the portrait width of my device which is 1080px.
If my tablet had a lower native resolution say 1024x768, then even a 960px width website would get chopped off in portrait mode.
Finally, and maybe most importantly, any divs that provide a background must not have a width set that is not flexible. Basically, always set CSS attribute to max-width: 1200px; rather than width: 1200px. This means that on smaller screens it will collapse to the width of the inner content div.
Short and painless, I've tried many ways to get an element, e.g. info text, absolutely centered (H/V) without using divs, Javascript, jQuery or whatsoever.
The problem is not getting this to work and there are many different ways, but I'm losing my hair trying to get it cross-browser-compatible.
And it should be so simple.
For example, in the following scenario, FF21 interprets a margin-top of 50% as 100% for no logical reason. (Mobile devices don't, though).
I'm using <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no" />
Relevant CSS:
body {
margin: 50% 0 0;
padding: 0;
border: 0;
display: block;
vertical-align: middle; /* removing this made no real difference at all */
font-family: Helvetica, Arial, MS Sans Serif;
font-size: 11pt;
text-align:center;
background-color: rgb(10, 50, 100);
color: #ddd;
}
Notes:
In Firefox, the expected vertical centering is set with a margin-top of 25% (which looks wrong in mobile browsers, then again).
Using HTML5
Trying to AVOID any form of script and precalculated, negative margins. The browser is supposed to center properly, as you request it to.
JS-Fiddle: http://jsfiddle.net/sfaVg/
Without an element containing the text, i doubt you will be able to position it dead center like you wish. Once you write proper markup (put the paragraph in a <p> where it belongs, for instance) it is quite possible though, with the following css;
p {
display: table-cell;
vertical-align: middle;
text-align:center;
}
Also make sure its container (body in your case) gets display: table; and 100% width/height
Demo at http://jsfiddle.net/sfaVg/3/
Also, a bonus alternative method (requires two containers) can be found at http://zoffix.com/new/absolute-center-random-width-height.html
A third solution, for when you know the dimensions of what you're centering: http://reisio.com/examples/deadcenter/