How can we help you today?

Known Issue: ShortPoint Web Parts Showing Blank After Recent Chrome Browser Update (127.0.x)

If you are using the Chrome browser to access your SharePoint pages with ShortPoint Design Elements, you may have noticed that some of the ShortPoint Web Parts are appearing blank or not displaying any content.


In this article, we will provide with a solution on how to get your pages back up and running.


TABLE OF CONTENTS


Issue


ShortPoint web parts with visibility settings applied to them (both device and people/group visibility) are displaying as blank or with loading shimmers. You may refer to the incident report here for more details:


ShortPoint design elements are not rendering in Chrome


This issue affects both SharePoint on-premise and Microsoft 365 environments.


Reason


This issue appeared due to a recent update of the Google Chrome browser that removes mutation events.


Solutions


SharePoint 2019 and Microsoft 365


Polyfilled package versions were created for the majority of active ShortPoint SPFx versions. The packages have been tested by the quality assurance team and the updates were deployed to ShortPoint customers.


As a result, if you are currently using a lower ShortPoint SPFx version, you simply need to upgrade to the latest version (8.3.4.599) to resolve the problem. To upgrade, click the [1] ShortPoint logo and select [2] Dashboard:


ShortPoin logo button


Click Upgrade:


Click Upgrade


To proceed with the rest of the steps, you may refer to this article in upgrading your version using ShortPoint SPFx Auto Upgrade Feature.



Important: Once you are done upgrading, but still the contents are not showing for your browsers, it is possible that the ShortPoint SPFx app from the App Catalog is outdated. To verify, please go to Site Contents and look for ShortPoint SPFx app. 

Click the three dots, then click Details to verify the version you are using. If it is lower than, 7.1.5.38, then it means you need to go through the upgrade process.

check the details of the app


Please follow this article to begin with upgrading your SPFx app: Tutorial: How to Switch to "New Upgrade" (if you are on a version below 7.0.x.x)

SharePoint 2013/2016


To mitigate this issue, you may use the solutions described below:


Go to the folder where ShortPoint is installed and open the shortpoint.master.js file. The folder location should look like this:

C:\Program Files\Common Files\SharePoint\Web Server Extensions\16\TEMPLATE\LAYOUTS\ShortPoint.Foundation\UI-Core\js\
Note: If you cannot find the shortpoint.master.js file there, try to replace \16\ with \15\.


Copy the code below:

!function(){if(window.mutationEventsPolyfillInstalled)return;window.mutationEventsPolyfillInstalled=!0;let e=new Set(["DOMCharacterDataModified","DOMNodeInserted","DOMNodeInsertedIntoDocument","DOMNodeRemoved","DOMNodeRemovedFromDocument","DOMSubtreeModified",]),t="Polyfilled",n={attrChange:0,bubbles:!0,cancelable:!1,newValue:"",prevValue:"",relatedNode:null};function o(e,o,a,r){let l=Object.assign({},n);a&&(l=Object.assign(l,a));let d=new Event(e+t,l);d.attrChange=l.attrChange,d.newValue=l.newValue,d.prevValue=l.prevValue,d.relatedNode=l.relatedNode,r&&Object.defineProperty(d,"target",{writable:!1,value:r}),o.dispatchEvent(d)}function a(e,t){let n=document.createTreeWalker(e,NodeFilter.SHOW_ALL);do t(n.currentNode);while(n.nextNode())}let r=new Map,l=new Set;function d(e){let t=[];for(let n of(e.forEach(function(e){let n=e.target,r=e.type;"attributes"===r?(null===e.oldValue||null===n.getAttribute(e.attributeName))&&o("DOMSubtreeModified",n,{attributeName:e.attributeName}):"characterData"===r?(o("DOMCharacterDataModified",n,{prevValue:e.oldValue,newValue:n.textContent}),t.push(n)):"childList"===r&&(e.removedNodes.forEach(e=>{t.push(n),o("DOMNodeRemoved",e),o("DOMNodeRemoved",n,void 0,e),a(e,e=>o("DOMNodeRemovedFromDocument",e,{bubbles:!1})),o("DOMNodeRemovedFromDocument",n,{bubbles:!1},e)}),e.addedNodes.forEach(e=>{t.push(n),o("DOMNodeInserted",e),a(e,e=>o("DOMNodeInsertedIntoDocument",e,{bubbles:!1}))}))}),t))o("DOMSubtreeModified",n)}function i(e){let t=e.getRootNode();for(;t instanceof ShadowRoot;)t=t.host.getRootNode();return t instanceof Document?t.documentElement:t}let u={subtree:!0,childList:!0,attributes:!0,attributeOldValue:!0,characterData:!0,characterDataOldValue:!0},s=Element.prototype.addEventListener;function c(n,o,a){return e.has(n)?{fullEventName:n+t,augmentedListener(e){Object.defineProperty(e,"type",{writable:!1,value:n}),o(e)}}:{fullEventName:n,augmentedListener:o}}Element.prototype.addEventListener=function(t,n,o){if(e.has(t)){!function e(t){if(l.has(t))return;l.add(t);let n=i(t);if(r.has(n)){r.get(n).count++;return}let o=new MutationObserver(d);r.set(n,{observer:o,count:1}),o.observe(n,u)}(this);let{augmentedListener:a,fullEventName:f}=c(...arguments);s.apply(this,[f,a,o]);return}s.apply(this,arguments)};let f=window.removeEventListener;Element.prototype.removeEventListener=function(t,n,o){if(e.has(t)){!function e(t){if(!l.has(t))return;l.delete(t);let n=i(t);if(r.has(n)&&0==--r.get(n).count){let o=r.get(n).observer;r.delete(n),o.disconnect()}}(this);let{augmentedListener:a,fullEventName:d}=c(...arguments);f.apply(this,[d,a,o]);return}f.apply(this,arguments)},console.log(`[SPX]: Mutation Events polyfill installed (native feature: ${"MutationEvent"in window?"supported":"not present"}).`)}();

Paste it at the very top of the file:


shortpoint.master.js file with added code

And save the file.


The code re-adds the required APIs that were removed from the latest Chrome (127.0.x) version. This ensures that ShortPoint can load correctly on SharePoint tenants.


Note: A hard refresh of the page might be required to get the fix working. To perform this action, hit the Ctrl+Shift+R (on Windows) or Cmd+Shift+R (on macOS). This will reload the page with the latest files.

Related articles:

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.

World's best intranet sites are designed using ShortPoint

Get started today! Learn more
See all 31 topics

Start a trial

Ignite your vision. Install ShortPoint directly on your site, or play in sandbox mode. No credit card required.

Get started today

World’s best intranet sites are designed using ShortPoint

Thousands of companies using ShortPoint everyday to design, brand and build award winning intranet sites.

Get started Learn more