Reference error: Can't find variable: IntersectionObserver - ios13

I'm trying to use IntersectionObserver in cordova 8.0.0 app which is running on ios 13. When I inspect my app via safari, I see an error on intialization:
ReferenceError: Can't find variable: IntersectionObserver
This would suggest, that IntersectionObserver is not available, and I should use a polyfill. But! I've read many post claiming that IntersectionObserver is nativly supported in iOS safari 12+. And I kinda assume, that cordova would be running nativly available WKWebView, so it should work without polyfill, right?
I've found that I've got IntersectionObserver enabled in my safari experimental features, so maybe there is an option/flag I could use to force enable this feature in my app as well? I'd really like to avoid using polyfill if it's possible..
Thx to any suggestions

We ran into this issue and there is one important thing to call out. While this has been fixed in newer Safari Browsers, this issue still can occur on older devices (despite fully updated Safari). This is due to the fact that the IntersectionObserver feature seems to be deactivated as 'Experimental feature' on older iPhones (I know for fact that this is the case for iPhone 8) - possibly to save resources - see https://youtu.be/qDSXYGybNVU?t=68. So to ensure your application to work you might need to use polyfill as an alternative/fallback nevertheless.

IntersectionObserver API is supported on iOS safari since 12.2. Yet it was supported via 'experimental feature' and enabled by default. I assume that experimental features are not enabled under cordova by default, so far I haven't found a way to configure it to be enabled.
An option is to use polyfill: https://www.npmjs.com/package/intersection-observer. I tested myself and performance is not good enough, it uses either setTimeout or MutationObserver to observe whole document with all options enabled.

I just added this checking
if ('IntersectionObserver' in window) {
// IntersectionObserver initialization code
} else {
// make lazy loading elements to be loaded right away
}
Enjoy

Related

Meteor - Using the built-in JavaScript Math library in an Android webview

I'm learning to use the Meteor framework and since few days I have this problem.
I want to use some functions of the built-in Math library, like: Math.trunc().
It's work when I launch my program in Chrome or Firefox on Linux or Windows.
It also works on Chrome on Android.
But... It doesn't work when I launch on an Android device using meteor run meteor-device.
The application is well installed on my device, I can launch it, but all my variables that use Math.trunc() don't appear.
Also I got a message in the console which says that the object Math doesn't have a trunc function or method.
MDN says about Math.trunc:
This is a new technology, part of the ECMAScript 2015 (ES6) standard.
This technology's specification has been finalized, but check the
compatibility table for usage and implementation status in various
browsers.
So your webview is probably just not yet implementing it. Keep in mind that the webview android uses is not always the same as the latest chrome you have installed. Probably your best option is to just implement the functionality yourself using floor together with an if condition if you really don't want to floor negative values but truncate the decimals instead.

Webstorm: is it possible to debug a Meteor application directly in Chrome DevTools' console, instead of Webstorm GUI?

As the title says,
I see it is possible to debug a Meteor application in Webstorm but I can't figure out how to do the debug directly on Chrome DevTools
You can debug the client code using Chrome DevTools by just opening Chrome DevTools while viewing localhost:3000.
I'm not aware of a way to use Chrome DevTools for server-side debugging, but you can debug from Chrome via Node Inspector. For details, type meteor help debug and follow the directions.
To get into CDT, mash F12 in the browser window.
Then, you can select the "Sources" tab, followed by the .js file you want to inspect, and at a breakpoint by clicking on the line of code you're currently interested in. e.g., this screamshot shows a breakpoint in a template's "events" section:
As you can see, there are many other tools CDT allows you; poke around, experiment, research, and you will find a wealth of valuable insight.
Besides Chrome, Firefox also has good debugging tools, and probably most other browsers, too, including Microsoft's new Edge browser. AFAIK, they are all invoked via F12.

GWT application not working in IE11

I have an application that is using GWT 2.0.4 and running fine on IE8 browser. When opened in IE11, it is giving blank page with error message given below.
com.google.gwt.core.client.JavaScriptException : (TypeError) : Object doesn’t support property or method ‘attachEvent’
The exception was thrown because “attachEvent” is a deprecated function used in older versions of Internet Explorer. IE11 uses “addEventListener” method instead of “attachEvent”.
The user.agent value was set to "ie6" so i changed it to "gecko1_8". After changing user agent it opens the application but the data in table(GWT-ext GridPanel) is getting overlapped over one another, scrollbars are missing and the alignment of menu bar is changed.
It is working fine after enabling the compatibility mode. What is the proper workaround to run my app in IE11 ? Do i need to upgrade GWT and if yes then to which version supports IE11? I don't have to use "X-UA-Compatible=IE8" meta tag....Please help
As with anything on the Web, you should always try to run the latest version, because everything changes around your application. 2.0.4 is 5 years old already!
So yes, upgrade to the latest version of GWT (2.7.0 as of today), and when the next version will come (2.8, in a few weeks) try to upgrade as well.
As a workaround, because it works in IE8, you could probably ask IE11 to emulate it using an X-UA-Compatible with value IE=EmulateIE8. But that's only a temporary workaround, as the next version (Edge, coming in Windows 10 to replace IE) will no longer support X-UA-Compatible (except in the Intranet zone). See the warning at the top of the X-UA-Compatible doc and this announcement by Mirosoft. The real solution is to stay up-to-date with GWT versions, just like you stay up-to-date with browser versions.

JavaFx web not working with Internet Explorer 11 with JRE7

I note that I cannot be launched on web IE 11 ..
I know that the useragent for IE11 is Trident not MSIE . so I suppose that the reason why I got always notification to install java even its already installed .. but I cannot find temporarily solution for that as guys solve this issue by updating deployJava.js for webstart and by adding "trident" with "msie"...
just note that only windows 7 can install IE11 or its bundled with Windows 8.1 .. you cannot install IE11 or update it to IE11 on windows 8.
again and briefly my questions are :
1- where JavaFX app detect browser agent?
2- is it possible to the modify package that is responsible for that and include jar to project ?
any idea is welcomed ..
Internet Explorer 11 is not a supported configuration for JavaFX in JRE 7.
You can request support for Internet Explorer 11 by filing a feature request in the JavaFX issue tracker. You can link back to this question in your feature request.
I guess what you are saying in your question is that the information Microsoft place in the UserAgent string for IE11 has changed from previous versions and the way to understand the UserAgent string encoded information has changed in IE11 compared to earlier browser releases. These changes mean that the current JavaFX deployment code does not correctly detect it is running in an IE11 environment and perform appropriate operations to enable JavaFX applications to execute in IE11.
I believe that JavaFX packaging code uses a dtjava.js script to detect the target browser. For JavaFX 8 this detection routine is (I believe) the JavaScript detectEnv() method. What you might need to do to get IE11 compatibility is to host your own deployment scripts and replace the dtjava.js in your local deployment scripts with a modified version you have created which is IE 11 compatible (detailed instructions on how to do this are outside the scope of this answer). Even if you do get the dtjava.js script to correctly identify and execute logic for IE 11, there may still be other issues running JavaFX in IE 11 (due to it not being currently a supported deployment platform).
I've made some modifications in dtjava.js and got it to work in IE11
In my case I'm using dtjava.js only for embedding an applet not based in JavaFX, so probably these modifications are not enough to make a JavaFX application run.
I changed the IE detection rule from
ie = isDef(window.execScript);
to
ie = /trident/.test(u);
in detectEnv()
and
if (isDef(d.addEventListener)) {
d.addEventListener("DOMContentLoaded",
invokeCallbacks, false);
}
if (ua.ie && ua.win) {
with
if (isDef(d.addEventListener)) {
d.addEventListener("DOMContentLoaded",
invokeCallbacks, false);
}
else if (isDef(d.attachEvent)) {
in init() function.
Of course, these are hacky changes not very tested (only Explorer 10, 11 and latest FIrefox and Chrome). Follow at your own risk...

How to remove "SDL Tridion has not been tested with this version of the browser"

I'm seeing the following message in the Tridion CME and am unsure of where the configuration is to that removes it.
Can anybody help?
This means that you are using an unsupported browser, or unsupported version.
If you want to avoid receiving this message when using an unsupported version you can modify the file \web\webui\webroot\configuration\system.config
In this file you need to add your desired browser into the <supportedbrowsers> node
UPDATE:
As stated on the comments, your team need to be aware that they are working on an unsupported version, even if the popup does not remind it for you.
As a rule of thumb, if the GUI seems broken or buggy on any specific action, retest against a supported version.
TIP: To overcome the problem of updating the system.config with every new version. (It's hard to keep pace nowadays with new chrome of firefox versions!) you can use regular expressions:
<supportedbrowsers>
<browser name="Any Mozilla Firefox" regExp="Firefox/.*"/>
<browser name="Any Google Chrome" regExp="Chrome/.*"/>
...
</supportedbrowsers>
Easy "removal". Ensure you make note the the client that you've removed a note from a supported point of view. Annoying as a developer indeed. A reminder to an - unsupported - client when you leave is really important.
I believe you should not try to ignore the message. Try to find out the right supported browser based on version of your SDL Tridion and please note you make need to so some browser settings as well.

Resources