I decided to try iOS15 beta and to my surprise a Flutter Web application am testing will not run with canvas kit renderer (it runs perfectly fine with the html renderer). The screen appears blank and I get no errors in Safari's developer console. Does anybody else have this issue? Any clues to what might be happening? I don't even know if this is a Flutter bug uncovered by some specificity about iOS15 or if it is an actual iOS15 bug. The native app runs perfectly well. The web app with canvas kit also runs perfectly well on every other browser I threw it at, except, obviously for Internet Explorer (this includes Android with Chrome, Android with Firefox, several browsers on Linux, several browsers on Windows, and even several browsers on iOS 14.x. On the other hand, I am running other web assembly apps on iOS 15.
Recently it was discovered that the cause of this issue was WebGL 2.0 on Safari/WebKit (Source). This issue should be resolved if you are currently running Flutter 2.7 in the stable channel.
Each source link in this answer leads you to the actual comments and respective authors of these workarounds at https://github.com/flutter/flutter/issues/89655
Best Solution
Since disabling WebGL 2.0 through Safari's Experimental Features will only affect your own computer AND switching to the master channel is not a viable solution for apps in production, you'll need to tell the browser that Flutter's engine does not support WebGL 2.0 on Safari (Source). This snippet of code needs to be called in the head tag before your main.dart.js is called in the index.html file.
<!-- Apple WebGL 2.0 fix (https://github.com/flutter/flutter/issues/89655#issuecomment-919685843) -->
<!-- TODO: Remove when https://github.com/flutter/engine/pull/29038 is merged to stable -->
<script src="https://unpkg.com/platform#1.3.5/platform.js"></script>
<script type="text/javascript">
let isSafari = /^((?!chrome|android).)*safari/i.test(platform.ua);
if (isSafari) {
HTMLCanvasElement.prototype.getContext = function (orig) {
return function (type) {
return type !== "webgl2" ? orig.apply(this, arguments) : null
}
}(HTMLCanvasElement.prototype.getContext)
}
</script>
TextStyle Workaround
The previously proposed solution to this issue was to set a slightly transparent underline for all text in your app by using the DefaultTextStyle widget. (Source)
TextStyle(
decoration: TextDecoration.underline,
decorationColor: Colors.white.withOpacity(0.01),
)
CanvasKit Workaround
If these solutions did not help, you can also try disabling CanvasKit as a last resort. (Source)
<head>
<!-- * Safari Renderer * -->
<script src="https://unpkg.com/platform#1.3.5/platform.js"></script>
<script>
if (platform.name.toLowerCase() == "safari" && parseInt(platform.version.split(".")[0]) >= 15) {
window.flutterWebRenderer = "html";
} else {
// Optional, default is `auto`
window.flutterWebRenderer = "canvaskit";
}
</script>
...
</head>
<body>
...
<!-- * Initialize Website * -->
<script src="main.dart.js" type="application/javascript"></script>
</body>
For this workaround to work you will need to set the web-renderer to auto when running or building the project in the terminal:
flutter build web --release --web-renderer auto
You might have to replace some widgets that only work nicely with the CanvasKit renderer since this workaround will force Safari 15 to use the HTML renderer:
import 'dart:js' as js;
// ** //
bool isCanvasKit() => js.context['flutterCanvasKit'] != null;
Widget dynamicText = isCanvasKit()
? Text("CanvasKit")
: Text("HTML");
If any of these solutions fixed your issue, please consider marking it as accepted.
The issue is with html renderer. Try using canvaskit for Safari.
<script src="https://unpkg.com/platform#1.3.5/platform.js"></script>
<script type="text/javascript">
if (platform.name.toLowerCase() == "safari" ) {
window.flutterWebRenderer = "canvaskit";
} else {
window.flutterWebRenderer = "html";
}
I have found this issue: https://github.com/flutter/flutter/issues/89655
Right now I fixed with this code:
<head>
<!-- * Safari Renderer * -->
<script src="https://unpkg.com/platform#1.3.5/platform.js"></script>
<script>
if (platform.name.toLowerCase() == "safari" && parseInt(platform.version.split(".")[0]) >= 15) {
window.flutterWebRenderer = "html";
} else {
// Optional, default is `auto`
window.flutterWebRenderer = "canvaskit";
}
</script>
...
</head>
<body>
...
<!-- * Initialize Website * -->
<script src="main.dart.js" type="application/javascript"></script>
</body>
Then when building your app, use:
flutter build web --release --web-renderer auto
Another workaround is to disable WebGL 2.0 on the iPhone (Settings/Safari), works fine too.
I've found a workaround and posted under the GitHub issue. Let me also post it here:
Websites that contain Chinese or Japanese characters currently crash on iOS 15 iPad and iOS 15 iPhone; they work fine on iOS 14 iPad, and other platforms (Android, macOS).
Also, neither Safari nor Chrome works on iOS 15. They both show a blank screen without any error messages.
I've tested above using html:
flutter build web --web-renderer html --release
A temp workaround so far is to add an "almost transparent" underline to Texts:
TextStyle(
decoration: TextDecoration.underline,
decorationColor: Colors.white.withOpacity(0.01),
)
Passing an actual transparent color causes the underline to render in black for me, so I'm just using a very faint color here.
I'm using a DefaultTextStyle widget to modify it for most texts, and manually adding it to a few particular ones that didn't cover. During debugging, I made the underline color visible, so I can observe which texts do not have underline yet. Once I make sure they all have underline, I turn the color off for release mode.
This issue was recently fixed in this merge request and is now on the master channel. It will most likely land on more stable channels in the coming days.
See these instructions for switching channel and then rebuild your application with your new flutter version and it should work.
I want to insert custom html code in document via code button (like this for example taken from bootstrap + some JS code):
<link rel="stylesheet" ref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
console.log("Hello world");
});
</script>
I wan't this to be in the source code of the document (not in text) so it can be rendered properly.
I have tried many settings (it would be long list, I spent whole afternoon with this smile) but nothing works, i.e. code is stripped / changed when I close the code window and open again.
for the context, I use TinyMCE as editor for CMS and sometimes there is need to add extra style or javascript library
So I would be very grateful if somebody could post tinymce 4.2 init settings which allows this... or say if it's even possible
You may use the tinymce command mceInsertContent:
my_editor_instance.execCommand('mceInsertContent', ui, '<my>html</my>');
I've noticed, that there is large qwerty keypad in some apps(Facebook, Browser), that differs from popup. How do I use it in SDK.
P.S. I have multi-scene app, with ime module included in app.json
I found out from Samsung support, that you can use IMEShell_Common object.
First you include these:
<script type='text/javascript' src='$MANAGER_WIDGET/Common/IME_XT9/ime.js'></script>
<script type='text/javascript' src='$MANAGER_WIDGET/Common/IME_XT9/inputCommon/ime_input.js'></script>
in body tag
After you can use shell like this:
var imeBox = new IMEShell_Common();
document.getElementById('search').focus();
imeBox.onShow();
In Samsung this can be achieved by IME. A very well described step by step procedure is mentioned in the below link. It also has a sample app that demonstrate the full functionality:
http://www.samsungdforum.com/Guide/tut00049/index.html
Here is the small demostration:
Load the plugin js:
<script type="text/javascript" language="javascript" src="$MANAGER_WIDGET/Common/API/Plugin.js"></script>
Now load the IME js:
<script type="text/javascript" src="$MANAGER_WIDGET/Common/IME_XT9/ime.js"></script>
Create instance of the plugin:
var pluginAPI = new Common.API.Plugin();
Now register you IME key and initialize it for a text field.
pluginAPI.registIMEKey();
imeMail = new IMEShell("messageText", Main.imeInitId, this);
imeMail.setKeySetFunc('qwerty');
Now just focus on the input field:
jQuery("#messageText").focus();
For more details, please check the above mentioned URL.
Happy Coding!
I am a beginner to the samsung smart tv app development. I want to close my app on click of exit button. I used the code like this
case tvKey.KEY_EXIT:
var widgetAPI = new Common.API.Widget();
widgetAPI.sendExitEvent();
break;
It is not closing my app. Can anyone help me to fix this issue
Please Check whether u have following links in the header of your page
<!-- Common widget API -->
<script language="javascript" type="text/javascript" src="$MANAGER_WIDGET/Common/API/Widget.js"></script>
<script language="javascript" type="text/javascript" src="$MANAGER_WIDGET/Common/API/TVKeyValue.js"></script>
<script language="javascript" type="text/javascript" src="$MANAGER_WIDGET/Common/API/Plugin.js"></script>
One more thing, if you want to simply exit on the press of exit button then you dont have to code any thing as by default pressing exit button will exit the app on the tv, but you can override this functionality by blocking the default exit functionality
When I try to move to the next page using window.open on my iPhone, I always get a
quick white screen before the next page is loaded. I am using jquery mobile and cordova 2.1.
I have two pages.. I used the code below to move to the next page when I click on the "next" button :
function MovetoNextForm()
{
window.open("nextpage.html");
}
It moves to the next page, but the problem is before the next page appears, it's showing a white screen for few seconds (1-2 sec).
I have used these includes :
<script src="cordova-2.2.0.js" type="text/javascript"></script>
<script src="jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="jquery.mobile-1.2.0.min.js" type="text/javascript"></script>
Here are some screenshots of the issue.
Firstpage :
White screen :
Secondpage :
How can I solve this ?
You should use $.mobile.changePage("pagename.html").
Also you should read http://jquerymobile.com/demos/1.2.0/docs/pages/page-anatomy.html for more information about Multi-Pages templates in jQuery Mobile.
Kind regards,