FIX DISPLAY NAVIGATOR

Hi,

I looked at the website with the developer tools, and found that fonts and CSS files are missing. It seems you are using a very strict CSP policy that doesn’t permit them to load.

Hello and thank you for your quick response.
I’m currently working on the fonts for my site
but since it was more the icons that posed the problem.. I was able to validate that the problem came from the Alpha experience of Elementor Inline Font Icons…by disabling it…the weather icons come back
Thanks

Hello
the display on connected chrome is fast and complete
the display in chrome mobile or chrome desktop not connected like edge … the display is slow and incomplete
I am using wp rocket which also allows preloading of dns or excluding “remove unused css”
I also have wordfence which can accept an IP whitelist
Do you have a configuration that would make the display faster and more reliable…either by adding or excluding something
thank you in advance

I am pretty sure the display issues on your site are caused by the CSP (Content Security Policy). I loaded your page with the Firefox Laboratory extension. Laboratory helps you generate a proper CSP header for a website. During the recording, the browser ignores all CSPs, and the page looks correct. The generated CSP looks like this:

default-src 'none'; connect-src 'self'; font-src 'self' data: https://fonts.gstatic.com; frame-src https://calendar.google.com https://docs.google.com; img-src 'self' data: https://s.w.org; media-src data:; script-src 'self' 'unsafe-inline' https://cdn.onesignal.com/sdks/OneSignalPageSDKES6.js https://www.googletagmanager.com/gtm.js; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com/

OWM Weather generates inline images, css, and js. It seems your CSP doesn’t allow those and that causes the display issues.

Hello
I’m no expert but maybe together we’ll find the cause…

I added in wp rocket
“remove unused resources” part the exclusion for .elementor-shortcode where the weather shortcode is installed and .owm-weather-id
in the “report javascript” part I put the exclusion “owm-weather”

it seems to work on all devices and browser chrome and edge private or not….
I don’t have firefox

However, I saw something that puzzled me….
I saw this error
DevTools failed to load source map: Could not load content for https://www.jardinerie-animalerie-fleuriste.fr/wp-content/plugins/owm-weather/js/bootstrap.bundle.min.js.map: HTTP error : status code 410, net::ERR_HTTP_RESPONSE_CODE_FAILURE
When I look through cpanel I don’t see a bootstrap.bundle.min.js file but rather this bootstrap5.bundle.min.js file
What do you think ?

Hi,

The message in the DevTools regarding the missing map file can be ignored. This is only needed for debugging purposes and the WordPress Codex says not to deploy the map files with production plugins or templates.

The WP Rocket settings should have no influence on OWM Weather either. No caching plugin would eliminate CSS or JS code that is actually used.

Your issue is the CSP (Content Security Poilicy). It is most likely generated by a Security Plugin. As soon as I turn off the CSP with a browser extension, the weather information is shown correctly. See https://imgur.com/nqL64oL As I said before, OWM Weather generates inline images, css, and js. It seems your generated CSP doesn’t allow those and that causes the issues.

Hello
I’m not an expert but I finally understood your advice
I improved the security score in the header…..
I am not at 100% of the setting and your proposal also causes 3 other errors
that’s it for now but i don’t think that solves our problem

There’s nothing else I can do. OWM Weather has to create inline CSS and Javascript on the fly to accommodate Custom CSS and some of the options. As long as your generated CSP rules don’t allow inline CSS and Script, the display will be broken.

Hello
I may have found an anomaly – I am not an expert – even if this will not solve the problem mentioned above
With the page builder elementor, I have a footer that applies to all pages
On the “Agenda” page https://www.jardinerie-animalerie-fleuriste.fr/agenda/
where is the “oem weather” plugin my footer has a 20px padding right in other modification.
The footer of the page seems to be influenced by the footer of the plugin
https://www.jardinerie-animalerie-fleuriste.fr/wp-content/plugins/owm-weather/css/colorAnimated.min.css?ver=6.0.1
Thanks

Hi
after the last update

DevTools failed to load source map: Could not load content for https://www.jardinerie-animalerie-fleuriste.fr/wp-content/plugins/owm-weather/js/bootstrap.bundle.min.js.map: HTTP error: status code 410, net::ERR_HTTP_RESPONSE_CODE_FAILURE

See above:

“The message in the DevTools regarding the missing map file can be ignored. This is only needed for debugging purposes and the WordPress Codex says not to deploy the map files with production plugins or templates.”

Hello
Thank you but since its appearance and the last update, I no longer have geolocation. Have you also seen my message from a week ago Thank you

I just went to your website and the geolocation works for me.

The footer will be fixed in the next version. There were some CSS definitions left over that shouldn’t be there for the plugin.

Hello
Everything is OK
css and geolocation …. need to reset permissions in browsers
Thanks a lot

Great. Thanks for the update.