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
}
My problem is that I cannot get media query to work on iPhone 5s iOS 9.3.2 Safari. I have a full screen video on my page what I'd like to change into an image on mobile. I have followed this tutorial to make it happen.
I have specified the viewport like this:
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
I have included !important tag in every css entry I need to be changed when being 640px, like this:
#media only screen and (max-device-width: 640px) {
html {
background: url('image.jpg') no-repeat center center fixed !important;
background-color: rgba(0, 0, 0, 0) !important;
}
#video {
display: none !important;
}
body{
background: rgba(0, 0, 0, 0) !important;
/*also tried with background:transparent !important*/
}
}
I decided to use 640px as it is the exact amount of pixels what gets rendered on iPhone 5s according to this source.
I have specified that the background should be transparent as it seems to be the only option to work around the default template style. Meaning when background becomes transparent the background image shows up.
I have read this and this. I have applied the suggested solutions to my problem but none of them worked.
NOTE: I don't have the Mac machine to test this issue via iPhone's web inspector. Making a VM on Windows seems to be not a one hour job.
I have tested my code in Chrome 50.0.2661.102 m (64-bit), Mozilla 46.0.1 and Edge on Windows Phone everything works fine.
I have tried to work with Safari 5.1.7 (the last version released for Windows), but it seems to be very outdated (as expected).
I have also cleared the cache with Ctrl+Shift+R and tried to use Incognito mode.
UPDATE: if I specify the color (for the sake of testing) before the image I will be then able to see the specified color in Safari, but no image:
background: green url('image.jpg') no-repeat center center fixed !important;
Any idea how to solve this?
While waiting for help I've found a workaround just for my case. Thanks to #daemeron's answer.
So instead of implementing separate styleheets for different devices it is just possible to hide the annoying Play button on the background by:
*::-webkit-media-controls-start-playback-button {
display: none!important;
-webkit-appearance: none
}
This works great on iPhone and Windows 10 mobile. Exactly what I was looking for.
I have an iOS web app. I have the following css applied
body{
background-color:red;
}
This red background shows up in iOS safari but when I save it to the home screen the background is white.
Why is this happening and how can I fix it?
I'm sorry but I wasn't sure whether you were talking about the home screen icon or the website background color.
1. If you mean that the icon is getting white you can fix this by a meta tag:
<link rel="apple-touch-icon" href="the/url/of/your/icon-image" />
2. If you mean that the background color is white instead of red, I would suggest that you just put it as inlin styling, like this:
<body style="background-color:red">
Or you can use the background property, so your css will be like this:
body {
background:red;
}
I hope this answered your question and that it will work!
When HTML5 pages load in Safari mobile, there is a split-second flash of white before the content displays. Sort of like the old' "flash of unstyled content (FOUC)" problem, but with a white screen instead... call it a "flash of white (FOW)" problem.
Anyone else seen this? How can I get rid of it? I've tried everything I can think of:
Setting the body background color to black, at the top of my first style sheet.
Setting the body background color to black, way up in the head, with a separate style tag:
<style type="text/css">
body {background: black }
</style>
In my desperation, I even resorted to adding (gasp!) an inline style to the tag:
<body style="background: black">
Nothing seems to work... I get this annoying flash of white every time I load a page.
Any ideas?
Thx, Keith :^)
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.