I'm using Angular on my site, but I've been having reports on it often not working. Often users have to try different browsers/devices to get it to work. On my computer it works fine on Chrome, Opera and Firefox, latest versions. I've had reports of the page not working for visitors when using Firefox (version 31.6.0) and Safari though.
I have a smartphone of brand Öwn (Chilean or Peruvian I think), and the angular code does not work on this phone. I've tried using Chrome and the Öwn browser (some browser of their own). I have expandable content powered by jQuery, and that works fine, so it's definitely only Angular the page has problems with.
I tried removing all dependencies (using ngAnimate and ui.bootstrap for datepicker, and ngDialog), but still doesn't work on my phone.
I'm sorry I don't have more details. This is the page where the problems happen:
https://www.easterisland.travel/tours/
Does anyone have a clue? Thank you!
The problem in the end was in the code of an Angular function. When declaring a new object, I hadn't applied a value to one of the variables. This:
var tourObj = {groupId: groupId, pricePP: pricePP, savingsPP};
should have been this:
var tourObj = {groupId: groupId, pricePP: pricePP, savingsPP: savingsPP};
It was tricky since some browsers accepted it (Chrome and later Firefox) but many didn't. To locate the problem I checked error console of Safari Mac, and all it said was that angular.min.js.map and angular-animate.min.js.map were missing. .map files are for showing debug messages with minified code. Once the .map files had been added (find .map files for angular here, clicking folder for your angular version), the error console showed me exact location of the error.
Related
My basic static React Redux TypeScript app works locally on Windows, and then it also works when I deploy to GitHub Pages for every device I've tested except iPhone 6 iOS 12.0.1 (where it is a blank white screen).
I've researched many articles, such as:
React/redux app renders blank screen on Safari
React/Node Uncaught SyntaxError: Unexpected token <
Why deployed react app on gh-pages is showing blank page on different browsers while showing correctly on my browser?
https://stackoverflow.com/a/57027870/470749
https://community.netlify.com/t/react-application-builds-deploys-into-a-blank-page/2571
https://github.com/facebook/create-react-app/blob/061d1e46fcd4766d38b45499c3d29cfaa2b7d0af/packages/react-scripts/template/README.md#github-pages
https://caniuse.com/#feat=es6
Most of them try to solve the case where all devices show a white page. But that's not my scenario.
Others talk about how older browsers need polyfills, but I've already added try/catch blocks around my use of fetch.
I've also tried changing to "homepage": "." in package.json, but again, I don't think that's related to the issue because most browsers already work, so I know that the assets are being accessed.
Any ideas?
Finally I remembered that I could use the free http://xip.io/ service to browse from my iPhone to the "local" React server hosted on my Windows machine.
That way, I could see error messages that wouldn't be visible on production (at GitHub Pages).
I discovered that the error was "ReferenceError: Can't find variable: IntersectionObserver".
So the solution would be to use a polyfill.
See helpful links:
https://stackoverflow.com/a/55767479/470749
https://stackoverflow.com/a/59368511/470749
https://github.com/mhartington/lazy-load-image/issues/1#issuecomment-372384646
https://webkit.org/blog/8582/intersectionobserver-in-webkit/
https://caniuse.com/#feat=intersectionobserver
"IntersectionObserver API is supported on iOS Safari since 12.2." That explains why it worked on other iPhones but not mine.
Hej
When testing one of the modal windows on https://angular-ui.github.io/bootstrap/#/modal my chrome browser freezes for about 50 seconds after I close the modal. For this time I can not do anything in that specific browser tab. I can not even scroll.
The console output does not show any errors.
I implemented the component modal in my own web app and the same happens.
Does anybody know about that issue?
Version of angular: 1.5.0
Version of angular-ui-bootstrap: 2.4.0
Version og Google Chrome: 55.0.2883.95 (64-bit)
OS: macOS Sierra 10.12.2
Btw: In Safari everything works fine.
Recently I came across with a similar issue. and Then figure out it's because of the CSS Display:block Attribute check try making it in to null on your modal div. this will take you in to the modal and out from it smoothly.
Hope this will help you some how.
My website works fine on Chrome but is broken on Apple Mobile Safari.
I have troubleshot the situation and have found that it is the below line of code placed in side of my angular controller that is causing the problem. With out this code everything works fine.
The code takes all images on the page and puts them inside of an array. Anything I can do differently to ensure proper compatibility? Thank you!
$scope.load_picture_cotent = function () {
$scope.pictures = Array.from(
document.querySelectorAll
('div.album [style^="background-image"]')).map
(el=>el.style.backgroundImage.replace(/url\((.*)\)/,'$1')
.replace(/"/g,'')
.replace(/thumbnails/,'highresolution'));
console.log($scope.pictures);
}
You can also view the website here.
Please let me know if you need any more information or would like me to expand my post to include more information.
you are using ECMA 2015 lambda notation, try to wrap this with babel and try it again, did you check the browsers compatibility status with ECMA Script 2015?
Thank you bretanac93.
He was right, I was using a newer version of Javascript than is currently supported by browsers.
He recommended I use Babel which is a compiler that converts new Javascript to a compatible Javascript.
I used babel to compile the compatibility javascript and it works like a charm.
I wrote a small AngularJS app that seems to run fine everywhere except in Safari (iOS) where I only see a blank page. If I hook up the phone to my mac and run Web Inspector I can see that there are no javascript errors (in fact the app runs fine and by looking at the DOM I see that scope variables are properly evaluated and replaced in the templates). What I DO see are many CSS errors. If I remove the offending CSS styles (Bootstrap 3) the errors go away yet the page remains blank. I tried removing all CSS and most trivial JS libs to no avail.
I'm using the following JS/CSS (in order of appearance on index.html):
bootstrap.min.css (v3.3.6)
bootstrap-theme.min.css (v3.3.6)
app.css (my own stylesheet which literally has two trivial style definitions)
angular.js (v1.4.9)
angular-route.js (v1.4.9)
ui-bootstrap.js (v1.1.2)
ui-bootstrap-tpls.js (v1.1.2)
lodash.js (v4.5.0)
moment.js (v2.11.2)
app.js (my own app)
Backend: Node 0.10 (running on a free OpenShift account) with Express v4. Files are served via the static middleware. No manual uploading is being done; deployment happens straight from the git repo after doing a push.
EDIT: Completely removed all CSS but problem persists. App fully works everywhere and still showing a blank screen on Safari iOS.
I have a working (in development) Angular app and I've just got my Grunt distribution script working how I want it to, however when run my app through Grunt and then run it from the distribution folder I just get a blank page, no errors, no logging in console, no missing files in the network tab in Chrome etc, it appears everything loads but nothing happens.
I've run into this issue before during development and thrashed around until it worked, however this is now much more complex due to the minified files in distribution etc.
I'd like to properly diagnose this blank page issue but I'm not sure where to start, it appears that Angular is simply not bootstrapping at all after processing to dist mode.
It appears there is no such thing as a very verbose diagnostic mode for Angular, I've switched to the uniminified and there is nothing reported at all.
I checked the minified html file and my ng-app tag is still there on the html element as it should be so that's not the issue.
Also if I drop to console I can type angular and get back the output for it, so it's there, just not doing anything.
Where to start?
Start with Chrome devtools open when you load the page.
Add $log.debug statements at the top of all your services and controllers.
app.js will not work without the
['paramname1', 'paramname2', function(paramname1, paramname2) {
version (all the other files minify fine with out it.)