Home›Support›English Support›[Resolved] White screen when clicking on a translation in advanced translation editor
[Resolved] White screen when clicking on a translation in advanced translation editor
This thread is resolved. Here is a description of the problem and solution.
Problem: The client experiences a white screen when clicking on a translation in the advanced translation editor, accompanied by a JavaScript error in the Chrome developer console indicating a 'SecurityError' related to 'cssRules' in 'CSSStyleSheet'.
Solution: Client identified that the issue was caused by a conflict with the NordVPN browser extension. We recommend disabling the NordVPN extension when using the advanced translation editor to avoid this issue. If you wish to continue using the NordVPN extension, we suggest contacting NordVPN support for further assistance.
Please note that this solution might be outdated or not applicable to your specific case. We highly recommend checking related known issues at https://wpml.org/known-issues/, verifying the version of the permanent fix, and confirming that you have installed the latest versions of themes and plugins. If the problem persists, please open a new support ticket at WPML support forum.
This is the technical support forum for WPML - the multilingual WordPress plugin.
Everyone can read, but only WPML clients can post here. WPML team is replying on the forum 6 days per week, 22 hours per day.
Background of the issue:
I'm trying to translate an article using the advanced translation editor. Up until now, I had no issues with using the editor to translate all articles in the blog. The issue occurs on all articles, both newly translated and older ones with existing translations. When I click on a translation on the right side of the screen (either an empty one or a prefilled one), I see a white screen. I'm seeing a JavaScript error in the Chrome developer console that may be the cause of this problem: [17] switchCurrentSegmentSaga.setCurrentSegmentId {currentSegmentId: null, newSegmentId: 6223904672} index.js?v=3.29.5:81 [18] setCurrentSegmentId 6223904672 index.js?v=3.29.5:81 [19] setCurrentSegmentId 6223904672 index.js?v=3.29.5:81 SecurityError: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules at index.js?v=3.29.5:3772:35716 at Array.forEach (<anonymous>) at importCSSVariables (index.js?v=3.29.5:3772:35682) at index.js?v=3.29.5:3934:1195 at $l (index.js?v=3.29.5:3934:1316) at SegmentEditor (index.js?v=3.29.5:3934:3883) at fp (index.js?v=3.29.5:38:18856) at qE (index.js?v=3.29.5:40:48494) at QS (index.js?v=3.29.5:40:43755) at OR (index.js?v=3.29.5:40:43681) console.error @ index.js?v=3.29.5:81 IA @ index.js?v=3.29.5:40 V0.Wa.callback @ index.js?v=3.29.5:40 Qw @ index.js?v=3.29.5:38 US @ index.js?v=3.29.5:40 sm @ index.js?v=3.29.5:40 Ww @ index.js?v=3.29.5:40 RC @ index.js?v=3.29.5:40 WE @ index.js?v=3.29.5:40 ev @ index.js?v=3.29.5:40 Vg @ index.js?v=3.29.5:38 (anonymous) @ index.js?v=3.29.5:40 Understand this error index.js?v=3.29.5:3772 Uncaught SecurityError: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules at index.js?v=3.29.5:3772:35716 at Array.forEach (<anonymous>) at importCSSVariables (index.js?v=3.29.5:3772:35682) at index.js?v=3.29.5:3934:1195 at $l (index.js?v=3.29.5:3934:1316) at SegmentEditor (index.js?v=3.29.5:3934:3883) at fp (index.js?v=3.29.5:38:18856) at qE (index.js?v=3.29.5:40:48494) at QS (index.js?v=3.29.5:40:43755) at OR (index.js?v=3.29.5:40:43681)
Symptoms:
I see a white screen when clicking on a translation in the advanced translation editor. There is a JavaScript error in the Chrome developer console: 'SecurityError: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules'.
Questions:
What is causing the white screen when I click on a translation in the advanced translation editor?
How can I resolve the JavaScript error related to 'cssRules' in the Chrome developer console?
There might be another (actual) inline issue than the said JS error. Can you enable debugging in your site, so you can get more detailed information? See https://wpml.org/documentation/support/debugging-wpml/ for details.
Once enabled, please retry. This will log the errors in the debug.log file which you can upload somewhere (i.e. hidden link) and share the download link for investigation.
When debugging is enabled, please try the following:
1) Take a full backup of your site and database before proceeding. It is highly advised to try these on a dev or staging site first, so your live site isn't compromised.
2) Deactivate all plugins except WPML and String Translation.
3) Switch to a standard theme like 2024 or 2021.
4) Check for the issue if it still happens.
5) Then start activating plugins one by one while keep checking for the issue. This way you 'll be able to pinpoint a conflict when & where it starts creating the problem.
6) If after activating all plugins you see that it still works fine, then switch to your theme and see if that's causing it.
Please let me know your findings and I'll try my best to help you further on the matter.
The issue seems to happen on the advanced translation editor's page, an external page that doesn't seem to be affected by my plugins or themes?
Either way, I've created a clone of my website, disabled all plugins and switched to the default 2024 theme. The same white page and javascript error show up when I try to edit a translation in the advanced translation editor. I've tried editing an existing translation, and created a new article with only a header and a paragraph. It makes no difference.
There's also nothing of interest showing up in the debug logs. I've reproduced the issue a few times in the timeframe of the logs: hidden link.
I need to take a closer look at your site. So I request temporary access (WP-Admin and FTP), preferably to a test site where the problem has been replicated.
Your next answer will be private, to share this information safely.
Also provide detailed steps to reproduce the issue and links to pages in the admin and on the frontend.
IMPORTANT: Please take a complete backup of the site to avoid data loss. I may need to activate/deactivate plugins also.
It looks like I've found the issue! I've disable all my Chrome browser plugins and the issue was resolved. After reenabling them one by one I've found out it is the NordVPN plugin that is causing the issue: hidden link. Even without an active VPN connection and with all of the additional security settings disabled this plugin causes the error.
