Upon transitioning static resources to CDN, an error occurs with Google Maps on Chrome and Firefox, while it functions properly on Safari

Looking for assistance in narrowing down my debugging efforts.

Currently, my website works fine without a CDN. However, when I switch to using a CDN (such as Edgecast or another one tested), the Google maps embedded on the pages do not display in Chrome and Firefox, but work fine in Safari (latest versions; unable to test IE).

Disabling the CDN setting within my application (social engine) resolves the issue, confirming it is CDN-related.

If I save the HTML source locally and view it in a browser, everything works fine.

Another feature of my site, a JS slideshow, follows a similar pattern of not working with the CDN enabled. The only change is the file locations of JS, CSS, and images.

I have tried various solutions, checked the console for errors, but am puzzled by this behavior. Any tips on further investigation based on the described patterns would be greatly appreciated.

If you'd like to see an example page that works in Safari but not in Chrome/Firefox, visit . The "map" tab should show a Google map.

Thank you in advance for your help.

Best, - Julien

javascriptcdnsocialengine

Answer №1

Encountered the same issue:

Uncaught TypeError: Array.prototype.forEach called on null or undefined at mootools-1.2.5-core-nc.js:81

Fortunately, I managed to find a solution that resolved the error for me:

To fix the problem in mootools-1.2.5-core-nc.js (or any other location where your code is located, which appears to work with older versions as well), replace the following line (#2901 in mootools-1.2.5-core-nc.js):

var rules = sheet.rules || sheet.cssRules;

with this line:

var rules = sheet.rules || sheet.cssRules || [];


It seems that both sheet.rules and sheet.cssRules may not always be properly initialized, hence assigning an empty array as a third fallback option to the variable rules resolves the issue.

Interestingly, Chrome appears to be more sensitive (or precise) in this scenario compared to other browsers... ;)

Similarly, if you are utilizing a compressed version, substitute this line (compressed line):

var F=E.rules||E.cssRules;

with:

var F=E.rules||E.cssRules||[];


In compressed versions, internal variables are often renamed to shorter values, so your variable may not actually be named F like in my case, but the concept remains the same :)


UPDATE: Since this appears to be a genuine bug, I have reported it to the MooTools Core bugtracker in hopes that they will address it in future official releases (https://github.com/mootools/mootools-core/issues/2345).

Answer №2

Although I haven't discovered the solution yet, it seems to be connected to a separate JavaScript that is blocking Google Maps from displaying.

I'm still uncertain about why Safari and Chrome behave differently, but I've managed to pinpoint the social engine plugin as the culprit.

This issue is definitely related to CDN, and it's worth noting that everything functions smoothly in Safari. If anyone has any theories, I'd love to hear them :-)

Answer №3

Encountering the same issue, I decided to update mootools from version 1.2.5 to 1.4.5. However, this caused a different error to surface:

Uncaught ReferenceError: Asset is not defined

To resolve this, I opted to use the Mootools builder available at , selecting all options and ensuring compatibility without compression.

Thanks to this solution, the slideshow functionality has been restored successfully.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

discord.js: How do I create a special case for mentioning members of the staff?

My recent focus has been on developing an anti-ping staff feature. Here's the code snippet: const ownerId = "368033271029956609"; client.on("message", async message => { if (message.author.bot) return false; ...

javascriptnode.jsdiscord.jsbots

javascript - increase counter by milliseconds

I am looking to enhance my JavaScript quiz counter by adding milliseconds. Currently, the quiz only tracks and displays time in seconds (stored in MySQL as a number of seconds, like 120 for 2 minutes displayed as 02:00). I now want to include milliseconds ...

javascripttimer

Troubleshooting API URL parameter problems

In my content management system (CMS), I am utilizing Laravel as a web API and AngularJS for making requests. An iframe is being used to call services with a direct link using the trusted src function. The issue I'm facing is that I cannot employ a s ...

javascriptangularjslaravel

Encountered an issue while attempting to access a property from an undefined source

I am struggling with this code as I am unable to correctly split the JSON data. The error message I keep encountering is: TypeError: Cannot read property "cu_id" from undefined. Here is a snippet of the JSON data (since it's too large to di ...

javascript

Looking for assistance in setting up a personalized slideshow to automatically play on its

Recently, I have taken responsibility for a project that was initiated by someone else. The website contains a customized slideshow on its homepage. To meet the client's requirements, I have already made some alterations to the appearance and feel of ...

javascriptjquery

The integration of angular-chart.js with generator-angular-fullstack is not supported

Recently, I decided to incorporate Angular into my project by utilizing the angular-fullstack generator (available at https://github.com/angular-fullstack/generator-angular-fullstack). My intention was to use the angular-chart-js library (https://github.c ...

javascriptangularjschart.jsangular-fullstackangular-chart

Issue: Attempting to execute FB.login() prior to initiating FB.init()

I have been trying to integrate the Facebook Login Button into my website by using this code: <div id="fb-root"></div> <script src="http://connect.facebook.net/en_US/all.js"></script> <script> FB.init({ appId : 'm ...

javascriptauthenticationfacebook

Is it possible to clear a div using jQuery and then restore its contents?

In my setup, I have a video player within a div where clicking the play button (.video-play-container) fades in the video, and clicking the close button (.close-video) fades it out. The issue arose when the faded-out video continued playing in the backgr ...

javascriptjqueryattr

Undefined will be returned if the data in AngularJS is not set within the $scope

I have developed a factory that contains a list of functions which are called when the state changes. On page load, I am calling dtoResource.rc1Step1DTO(). Although the function executes, when I check the result in the console, it returns undefined. Below ...

javascriptjqueryhtmlangularjs

How does the Rx subscribe function maintain its context without the need to explicitly pass it along

Currently, I am utilizing Rx with Angular2 and making use of the Subscribe method. What intrigues me is that the callbacks of the method are able to retain the context of the component (or class) that initiated it without needing any explicit reference pas ...

javascriptangularrxjs

Troubleshooting Issue: jQuery Hide/Show Functionality Not Behaving as Expected Inside If

Trying to create a jQuery slideshow but encountering some difficulties. The issue lies with a variable that should hide or show images based on the navigation buttons pressed. However, only img1 is showing and none of the other images are displaying. Des ...

javascriptjqueryhtml

Decipher intricate JSON with JavaScript

After retrieving a JSON object from Mongo DB, I have this data structure. **JSON** { "_id" : ObjectId("5265347d144bed4968a9629c"), "name" : "ttt", "features" : { "t" : { "visual_feature" : "t", "type_feature" : ...

javascriptjsonmongodb

Crafting a clever smart banner using jquery.smartbanner for Android Firefox users

In order to display smartbanners on my mobile website, I utilize jquery.smartbanner. This implementation has been successful for ios, windows phone, and the default android browser. However, when testing on Firefox for android, the smartbanner is not visib ...

javascriptjquerydjangomobile

Breaking apart field values in React Final Form

In my react and redux application, I am using react final form with a 'cars' field that is a select. When the submit event is triggered, it should only return specific types like coupe: ['BMW'] instead of just the field name with values ...

javascriptreactjsreact-final-form

What method can I use to locate the double quote option within an HTML select element using jQuery?

Here is an example of the select: <select id="id0" name="name0"> <option value='30" size'> 30" size </option> </select> The select contains double quotes. I am trying ...

javascripthtmljquery

Calculate the total sum of varying values extracted from both the entered text and selected

Currently, I am facing an issue with summing up the value of an input text dynamically changing with a radio button that also changes dynamically. While some aspects are working correctly, there is still something wrong as the sum does not update when expe ...

javascripthtmljqueryformsradio-button

Error encountered with IPCRenderer in the electron render process

Currently, I am delving into the world of Electron and exploring more nodes. However, I seem to encounter an error every time I try to interact with IPC Renderer. render.js:6 Uncaught ReferenceError: Cannot access 'ipc' before initialization at u ...

javascriptnode.jselectron

Struggling to generate components using JQuery

I'm currently working on a form that checks the availability of a username using jQuery. Here is the initial form code: <form> <input id="checkuser" type="text" name="user" placeholder="Your username"/> </form> Below is the jQuer ...

javascriptjqueryajaxdom

Using vuex to paginate through firestore data and seamlessly update the state with new information

After taking advice from Tony O'Hagan on Stack Overflow, I integrated the following code to exhibit a paginated query: bindUsers: firestoreAction(({ bindFirestoreRef }) => { return bindFirestoreRef('users', Firebase.firestore().c ...

javascriptvue.jsvuexvuexfire

Error: The function $(...).ekkoLightbox is not defined

Recently, I attempted to integrate ekkolightbox into my WordPress website. However, each time I selected an image, I encountered the following error message: Uncaught TypeError: $(...).ekkoLightbox is not a function Initially, I suspected that the issue ...

javascriptjqueryhtmlwordpresstwitter-bootstrap