JavaScript alerts, prompts and confirmations don't seem to be working when invoked from a fullscreen web app run from the homescreen. They work fine when in Safari, just not when run fullscreen from the home screen. I submitted a bug request but maybe I'm missing something special in iOS 7?
Here's sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Fullscreen Web App Alert Test</title>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
</head>
<body>
<p>This is an alert</p>
<p>This is a prompt</p>
<p>This is a confirmation</p>
</body>
</html>
It's a bug that was fixed in iOS 7.0.3.
Related
I recently started working with Tailwind-CSS as my framework, and I finished my first practice project using it. However, when I try to open the .html file (index.html for example) in my browser, it loads the HTML file without loading the CSS. Why does that happen?
How can I deliver a project in Tailwind-CSS to a client if the CSS does not load?
Here is the index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="/dist/output.css" rel="stylesheet" type=".text/css"/>
<title>Manage Landing Page</title>
</head>
<body>
It may be worth noting that I have 3 projects done with Tailwind-CSS using VS Code. None of my three projects load any CSS when opened in browser, despite two being done by following tutorials on Tailwind-CSS on YT. They only load CSS when I open them through the Live Server extension for VS Code.
I'm working on a web app (no UI libraries) where I want switching windows to update the document title. By "windows" I mean floating <article> elements on the page, not browser windows.
In Firefox 90, the following code runs instantly. It does in Safari 12 also, so I can't call this a WebKit problem. But in Chrome 91 and Edge 91, at least on the macOS 10.14 machine I'm using, there is a noticeable split-second delay between pressing the button and the title changing.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button onClick="document.title='foo';">foo</button>
<button onClick="document.title='bar';">bar</button>
</body>
</html>
Is there any way to alleviate this? Trigger some kind of document.title "repaint" or "reflow", if you will?
I do not think that this can be fixed, I have noticed the same thing. I think it is created by the programming of the browser itself, not the website.
I have a web app I've been using for a while without problems. With Apple's update to iOS 9.2.1, window.print() no longer works when the page runs as a web app saved to the home screen. If I run the page directly within safari, it works just fine. When I save it to the home screen then click the print button, the app hangs on the print dialog then will crash after a minute or so. Print preview also no longer works. At this point, I'm assuming it is a bug in iOS 9.2.1 but wanted to post my code here in case someone sees a problem or can offer a suggestion.
Here's the test HTML:
<!DOCTYPE html>
<html manifest="cache.manifest">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<!-- <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=0.6667, user-scalable=no" /> -->
<meta name="version" content="Version 3.0 Beta 3" />
<meta name="apple-mobile-web-app-capable" content="YES" />
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
<meta name="apple-mobile-web-app-title" content="ADDRESS">
<link rel="stylesheet" href="">
<link rel="shortcut icon" href="">
</head>
<body>
<p>test page</p>
<form >
<input type="submit" value="Print" onClick="window.print();">
</form>
</body>
</html>
And here's the cache file:
CACHE MANIFEST
#version 3.1 Beta 3 7-20-2015
CACHE:
#internal HTML documents
index.html
NETWORK:
*
The issue I have is the same as the 2 below:
Link 1
Link 2
The problem I have is that my app is an AngularJS page which use ui-router which is not supported in IE8.
To be able to correctly display SSRS report I have to add this meta to the root page:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
But this cause lots of issues with page display, I need to find different solution.
I was trying something like the below, but no luck:
<iframe class="ssrs-frame" type="text/html" ng-src="{{trustSrc(SSRS.url)}}" frameborder="0">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8">
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
</body>
</html>
Is there any way I could force Iframe only to emulate with IE8?
If you want to have specific CSS for IE8 you could use (inside head):
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="ie8.css">
<![endif]-->
That works. I don't know if HTML also allows this, you should test it:
<!--[if IE 8]><iframe></iframe><![endif]-->
Else you could create 2 iframes, 1 which you show for IE8 and 1 which does not. You could set display: block inside the ie8.css file for the specific iframe.
Hope this helps. Cheers
Pulling my hair out!
Running a simple phonegap build, using JQueryMobile pages. The program runs through chrome/firefox etc. but on internet explorer is completely unstyled. IE brings up a warning: blocked content. If I click allow, it runs the javascript and picks up the styling.
Downloading my phonegap build onto an android tablet, and it too doesn't pick up the styling. It looks identical to IE before the blocked content. There has to be something in that surely?
I have tried downloading the JQuery CSS/js files and running them locally on the android but no luck. I have simplified back to one page below. Can anyone help?
Thanks
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
<title>Hello World</title>
</head>
<body>
<div data-role="page" id="ims">
<div data-role="header">
<h1>Main</h1>
</div>
<div data-role="content">
Labs
Equipment
</div>
<div data-role="footer">
<center><p>Copyright</p></center>
</div>
</div>
<script type="text/javascript" src="phonegap.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
ims.initialize();
</script>
</body>
It seems that you missed some jquery files or css or might have incorrectly referenced in your HTML file.
If you have downloaded jquery mobile: js & css; check if it is referenced correctly within 'script' and 'link' tag.
Use document ready function at application start-up.
http://learn.jquery.com/using-jquery-core/document-ready/