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.
Related
I'm trying to get the Facebook Post embed working on my own site using their JS SDK but it doesn't seem to show up.
Some inline styles on the embedded iframe and the span it encapsulates it, controls the display of the widget.
I found some hacks but they aren't perfect. I used facebook's JS playground on the same code and it works.
There aren't any stylesheet interfering with this file and no extension as well as I checked in firefox and the result was the same.
edit: posting the code here:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.12" async></script>
<div class="fb-post" data-href="https://www.facebook.com/20531316728/posts/10154009990506729/" data-width="500"></div>
</body>
</html>
Kindly see the photo attachment.
Thanks
P.S. Facebook code is directly copied from their docs, HERE
I assume you tried this by just opening the HTML file in your browser. You have to open it using a local or remote server. If i start it with a local server with the exact same code, it works perfectly fine.
For example: https://www.npmjs.com/package/http-server
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
I have a simple Angular app which is loaded into a third party frameset - yes a frameset.
The app loads fine in Chrome and IE8 but doesn't at all in IE9.
When testing outside the frameset in IE9, it loads fine. As such I think the issue is that the frameset triggers IE9 quirks mode, and Angular just doesn't want to load in quirks mode.
I can't force standards mode because I only have control of the code within the frame.
Essentially my question is - is it possible to get Angular (v1.2.26) working in IE9 quirks mode or is it a lost cause?
I've tried everything from the Angular IE guide, and also disabled sce.
$sceProvider.enabled(false);
Below is the index.html that is loaded within the frameset.
<!DOCTYPE html>
<html
xmlns:ng="http://angularjs.org"
xmlns:ui="http://angular-ui.github.io"
xmlns:az="xxxx"
id="ng-app"
ng-app="xxxx">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>xxxx</title>
<link rel="stylesheet" href="styles/vendor-b543e73e.css">
<link rel="stylesheet" href="styles/main/main-a902793d.css">
<script src="scripts/vendor-55f700d3.js"></script>
</head>
<body>
<ui:view id="view-app"></ui:view>
<script src="scripts/main-bb00ee53.js"></script>
</body>
</html>
As far as I can tell Angular simply doesn't work in Quirks mode.
We are having a bug in our iOS app when using an HTML text input in a webview.
Here is the HTML :
<!doctype html>
<html>
<head>
<title>Test</title>
</head>
<body>
<input type="text"/>
</body>
</html>
If the input is tapped once, it works perfectly : it gets the focus and the keyboard appears, the user can type. However if the user taps again on the input, the cursor moves to the far left of the input and nothing that is typed appears in the input.
This bug can be seen on iOS7 and iOS8 devices in a webview. It does not appear in Safari or Chrome.
To see this behavior, I've uploaded this video.
I have tried to find a JS solution, playing with .focus(), without any success. Does anyone have a clue on where it might come from, or how to solve this?
Add this metatag in html head section:
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi, user-scalable=no" />
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.