I am writing an Angular (v.9) web application which contains few tiles on the scrolling panel. When given option is out of order I set blurred grey background with text on it. It works fine on desktop chrome/firefox/edge and mobile chrome/firefox. However when I test it on iOS with Safari text becomes too large for the tile. Even though I set font-size property on the "p" element itself:
<p style="font-size: 14px">
sometimes computed style says 21px.
As you can see, I marked that with red rectangles. Moreover, the issue does not appear on all tiles - as you can see blue one looks fine - font size is 14px. Unfortunately the presence of the issue on the particular tile seems to be totally random.
I use BrowserStack for testing, problem appears only on all iPhones (checked 8, 10, 11, 12) with Safari. Running Chrome does not produce issue.
It is not possible to expand "font-size" tree so I have no idea where that value come from, I haven't set 21px anywhere.
Do you have any ideas how can I force Safari to use given font-size? I've already tried multiple tricks like using !important, changing size based on some properties or even set different font size on click - works on all browsers but Safari.
Try this (only for iPhones)
#media screen and (max-device-width: 480px){
body{
-webkit-text-size-adjust: none;
}
}
and also make sure your code has the correct device meta tag
<meta name="viewport" content="width=device-width; initial-scale=1.0;" />
This is the mixin that I use for the Safari browsers
#mixin safari-only {
#supports (-webkit-marquee-repetition: infinite) and (object-fit: fill) {
#content;
}
}
You can use that in your .scss file as follows:
#include safari-only() {
// your CSS
}
Related
I'm working on a responsive email template for my employer. For the desktop size, I was able to leave the default font size at 16px and just use rem to adjust sizes as necessary. It looks fine on the desktop, in Gmail, and is fully responsive. However, when viewed in Mail on iPhone, the font is SO SMALL. I had to add a media query that increases the base font size to 26px to get reasonable font sizes in the email. I've tried doing some research, but it doesn't seem as if other people have had to do the same. There is very little CSS in the code, but here is what I have:
body, table, td, a, p, span {-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;}
#media screen and (max-width: 600px) {
html, td {
font-size: 26px !important;
line-height: 1.3;
}
}
I also have
<meta name="viewport" content="width=device-width, initial-scale=1">
There is some other CSS having to do with resizing images, with margins, etc. but that is the only CSS dealing with font-sizes (all the rem info is inline so it isn't stripped out by Bronto/Gmail). If I resize it in the browser to a mobile size, the text looks massive, but when viewed on my iPhone, it looks great. I'm concerned that this may be an iPhone quirk though and that it will look massive on other types of devices. Does anyone have any insight?
Here is some code from the templates I use (where I don't see this issue):
Try making your <meta> tags look more like this:
<meta name="x-apple-disable-message-reformatting">
<meta name="viewport" content="width=device-width">
The first tag disables auto-scale in iOS 10 Mail, which could be affecting your text size. The second tag sets the viewport; forcing initial-scale shouldn't be necessary and could be throwing off your design.
Also try moving the inline body styles from the <body> tag to inside a universal selector in <style>, like so:
<style>
/* What it does: Stops email clients resizing small text. */
* {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
</style>
<body width="100%" bgcolor="#ffffff" style="margin: 0; mso-line-height-rule: exactly;">
Have you heard of the viewport meta tag? You should consider adding this tag to the meta on your site. Just be cautious though as it could manipulate other HTML elements you have already configured.
<meta name="viewport" content="width=device-width, initial-scale=1">
Here is a link to a page explaining what it does in further detail.
https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag
Okay, finally figured it out. Luckily I had been going through and making all our email templates responsive, and one of them didn't have a hero image. Guess what? The font size looked massive on mobile for the imageless-template! So after some experimentation, I found that
img {
width: 100% !important;
}
completely resolved the issue, so that now the actual font-size matches what is set in the CSS. Despite all the width:100% styles set on the image itself and on its parent containers, somehow the image must have been too large and triggered a resize of all content, I guess? If anyone has an explanation I'd love to hear it.
FWIW, I think you are complicating your life trying to use the text-size-adjust property.
According to the browser compatibility chart on this MDN document, there is poor browser support and it's buggy.
Secondly, the way I read this W3C doc I don't think you are using it for its intended purpose. W3C states that:
This module contains features of CSS relating to one possible
mechanism for adapting pages designed for desktop computer displays
for display on smaller screens such as those of mobile phones...
Its purpose is to provide a solution for pages which were designed for desktop display only.
As you know, older web pages which don't use the viewport meta tag will be scaled down to fit the viewport of a mobile device. The problem with this is that text often becomes too small to read and this text-size-adjust property proposes to remedy this by enlarging text on mobile devices.
I think if you continue to use the viewport meta tag, make your template responsive, and size elements so that they display well in all devices you would get good results if you don't use text-size-adjust, i.e. some like the following:
body, table, td, a, p, span {font-size:16px;}
Good sources of info about text-size-adjust:
https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust?v=control
https://drafts.csswg.org/css-size-adjust/#text-size-adjust
https://caniuse.com/#search=font-size-adjust
I built a website for myself which I believe is responsive as per my testing with Firefox's responsive mode. I tested all the pages with the iPhone resolution (375*667) both landscape and portrait mode and it worked great.
However when I try to open the same site in Chrome, it does not display properly. It also shows the same effect when viewed from an iPhone.
This is my site - http://v1chu.github.io/
The background images in used in section 2 and 3 are missing whereas it is working fine with Firefox (also in responsive mode). I can't see the background in my device as well.
Also the site content looks very small when viewed in Chrome and device. But it looks just fine when viewed in Firefox.
Please tell me if the way I have built the site is right or not ? Or if something that I have missed which messes up the site on Chrome and devices.
You're heading in the right direction.
Problem #1, Background Images
Your background images don't appear because you are using the background-attachment property with the value fixed. It sets the background in relation to the viewport (browser window). You're basically pinning the background image to the top of the page and by the time you get to your 2nd and 3rd sections you've scrolled past the background image.
You have set background-attachment via the shorthand background property. Remove fixed from the background property.
background: url( '../img/aboutme.jpg' ) no-repeat center;
Problem #2, Text size
You need to use a responsive meta tag. Here's one that I use:
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
The problem seems to be here:
.s2 {
background: url(../img/aboutme.jpg) no-repeat center fixed;
}
I removed the fixed and the background displayed in chrome
s2 {
background: url(../img/aboutme.jpg) no-repeat center;
}
I am trying to remove or at the very least reduce the page margins when printing a webpage from an iPad. I have attempted various forms of the #Page directive as indicated by MDN, but it has had no effect. Examples of attempts:
#page {
margin: 0.5cm;
}
Also:
#page
{
size: auto;
margin: 0mm;
}
body
{
margin: 0px;
}
I then proceeded to try to find some documentation of whether or not iOS safari supports the #page directive, but all I found was a SO question from 2009 that said safari in general doesn't support it, which to my understanding is no longer the case, and regular safari does in fact support it.
So, is it possible? Am I doing something wrong with #page that causes it to ignore margin? Or does safari for iPad simply ignore any attempts to change the margins via css?
Unfortunately, it looks like what you are trying to achieve is not possible.The Safari CSS Reference only lists basic support for Paged Media and is missing support for the size property. As a result, Safari (desktop and mobile) does not support applying margin or size properties within the #page rule.
I also did some additional testing with Safari Mobile for iOS 8 in regards to printing with the simulator. I was able to confirm that it is not possible to modify the paper margins or remove the print footer at this time.
I have a fairly strange issue that I'm experiencing with jquery mobile / phonegap and IOS.
I've created a web app with html / css and so far it works exactly as expected on android, (The content scrolls vertically in the viewport) however on ios (my test platform is an iphone 4s), the page is limited vertically to the viewport. It scrolls just fine, but all content that sits below the viewport vertically get's cut off, IE the only content that will display is what I see in the upper half of the page, nothing below the viewport will display.
an excerpt from my css file:
html, body {
min-height:100%;
overflow-x:hidden;
background-attachment:fixed;
}
body {
-webkit-touch-callout: none;
-webkit-text-size-adjust: none;
-webkit-user-select: none;
-webkit-font-smoothing: antialiased;
-webkit-backface-visibility: hidden;
-webkit-overflow-scrolling: touch;
}
and my html page, in the head section:
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1 minimum-scale=1; user-scalable=no" />
Here's a couple screenshots of the problem in action:
As you can see from the screen shots, the gradient "should" fill the whole page (ie, expand with content), and it doesn't as there seems to be a hard cutoff at the viewport edge, so any more than a single page of content is not getting displayed. While it's not visible in these screenshots the vertical scrollbars are appearing as they should and the scrolling works fine, just no content is displayed "below the fold".
I am not using iScroll or any other scrolling scripts, just fyi.
I'm not sure if this is some sort of height issue, as I have a min-height:100%; set on the html and body of the page, or if it's some sort of width-device-width issue in the meta tag? I also do not believe I have any overflow-y:hidden set, as that would have limited the content on other platforms, and they work perfectly.
I feel like I must be missing something really basic, as I'm sure it's got to be some sort of css setting somewhere that's limiting the content to the viewport only, and an exhaustive google search could find no similar issues.
Check if your apps default orientation is set to portrait instead of landscape, or if it even supports the portrait orientation. It almost looks like its displaying the app as if its in landscape mode while its clearly in portrait. You can find the available orientation in the Target>General tab, or in the info.plist.
So I've fixed it, and the weird thing is, I'm not exactly sure what I did to fix the issue.
I moved the .ui-page selector from the jquery-mobile file to my own css file, removed the min-height from the html selector and killed the overflow-x from the html, body selectors and boom, it now appears to be working as intended. Wacky... but hey, a win is a win. :)
In recently testing a web application on Windows/Mac desktop browsers - and then on an iPad I noticed various differences in Safari that I wasn't expecting. Even though the version # is the same.
I'd like to compose a list of those differences (for myself and others) to have as a developer reference.
e.g. in Safari on the iPad
iPad Safari takes full control of Select list/option styling
iPad opens the onscreen keyboard when an input element receives focus, thus inline floating calendar widgets (and the like) may not work as expected (or need to be altered)
iPad Safari doesn't support position:fixed like desktop Safari < iOS 5
iPad Safari (similar to iPhone/iPodTouch Safari) automatically hyperlinks 10 digit numbers to offer phone #/contact options
iPad Safari prompt('long message...','default'); shows only 1 line of the message (though it does provide scrolling of the message
I've heard from others that certain JavaScript doesn't work, etc. etc. but I have yet to fully test it thus I'd be grateful for any discoveries that you may have encountered.
A few more for you:
No Flash
Lousy iFrame support (so facebook like etc. needs a custom implementation for iPad)
Weird caching limitations
HTML textAreas doesn't get a scroll bar (you have to double-finger swipe - which of course, is amazingly intuitive)
In general. Treat it like a scaled up iPhone, not a scaled down Desktop.
I thought this might be useful: Apple's guide to preparing web content for the iPad
Just been caught out by the position:fixed issue my self
Safari on iPad has the same issue with button width/padding as on the iPhone
iPhone <button> padding unchangeable? describes this problem and a solution for removing padding on a button with text, but this does not help you if you want a button to be narrower than the padding itself (e.g. for a button that only has a small icon on it). To do that, I had to surround the button with an outer element with a defined width and overflow: hidden like so:
<span style="border: solid 1px blue; display: block; width: 16px; overflow: hidden">
<button style="-webkit-appearance: none; border-width: 0"> </button>
</span>
(the blue border is to show where the button is, it's not critical to the hack)
jQuery's offset() doesn't work: http://bugs.jquery.com/ticket/6446
It also looks like iPad Safari has issues with elements with overflow:auto; that therefore should show scrollbars (test page with div's and iframe's).
iPad Safari seems to have trouble handling background images in rare cases, showing weird lines of lower lying content.
There's not a lot about this in Google (yet).
iPad browser doesnt support file uploading(even if it supports it will useless as iPad does not have a standard File Browser). The file field appears with a Choose File button grayed out.
Beside doesn't support scrollbar in TextAea, it seems that we can using javascript to make text in TextArea selected automatically too.
This code will only move cursor to the end of text in TextArea.
<div>
<textarea id="text-embed-code" autocapitalize="off" multiline="">
There is a fox running after chrome.
</textarea>
<button onclick="testSelectText(event);">select text</button>
</div>
<script>
function testSelectText(e) {
var box = document.getElementById("text-embed-code");
box.select();
e.preventDefault();
return false;
}
</script>
There appears to be a bug in iPad Safari where a CSS element with both a background image and a background color is rendered with a slight border in the color of the background color. It should fill with the background image all the way to the edge of the rendered element.
I just had the same bug on my site, when trying to view it on an Ipad. The HTML structure is like:
<div class="main"> <!-- background-color: white -->
<div class="left"></div> <!-- background-image: url(some_transparent_png) -->
<div class="content">...</div>
<div class="right"></div> <!-- background-image: url(some_transparent_png) -->
</div>
The left layer uses a background-image, whereas the main layer uses just a background-color. The Ipad view shows a slight border at the edge of the left and right layer.
When i add
-webkit-background-size: 100% 100%;
to the left and right layer, the border disappears.
You can now control the styling of select lists on iOS by resetting it with -webkit-appearance: none;
This rule fixes animation flickering in Safari on iOS devices:
body {-webkit-transform:translate3d(0,0,0);}
There appears to be a bug in iPad Safari where a CSS element with both a background image and a background color is rendered with a slight border in the color of the background color. It should fill with the background image all the way to the edge of the rendered element.
24 bit transparent PNGS ABOVE A CERTAIN FILE SIZE don't render on the iPad2.
I can however get 8 bit ones of the same dimensions to render.
I haven't found out what this maximum file size is in order to get them to render.
I'm currently working on a small responsive web-app which makes heavy use of the iframe youtube api. Apparently the ipad version of safari doesn't support a few html5 methods which I use heavily in this project.
One of them is window.postMessage, which is a way of interacting with scripts on other pages, for example the a script that is used "within" that iframe. Autoplaying videos also doesn't work.
Frame problems. iPad Safari will both hide scrollbars and expand frames to the size of their content.
Changing the frame tag to include scrolling="yes" and noresize="noresize" appears to do nothing.
Some sites look fine on everything, even a Dreamcast browser, but not on iPad. The issue can be fixed using tables and iframes instead of normal framesetting (cols and rows, etc).
I also discovered that contenteditable is not supported in mobile safari, thus using a plain textarea is a better bet. Apple Developer Docs
position: fixed;
Does not work in iOS 4 but does work on iOS 5.