Safari + Firefox Not Displaying Content and BG of Hero & Console Errors in Safari

[moseke]

Site URL: http://azpack329.org/

This looks fine on Chrome, but Safari and Firefox are not displaying the background.

Chrome (Desired output):
Safari & FF:

Additionally, the Safari console is reporting errors loading the following files:
http://azpack329.org/wp-content/themes/pro/framework/dist/js/site/x.js.map
http://azpack329.org/wp-content/themes/pro/cornerstone/assets/dist/js/site/cs-head.js.map
http://azpack329.org/wp-content/themes/pro/cornerstone/assets/dist/js/site/cs-body.js.map

[ruenel]

Hello @moseke,

Thanks for writing in!

I am using Chrome and I could not see the background image. You are experiencing this issue because of this custom css that you have added:

.x-section.ripped {
    -webkit-mask-image: url(http://azpack329.org/pack-329/wp-content/uploads/2019/06/rip-mask.svg);
    mask-image: url(http://azpack329.org/pack-329/wp-content/uploads/2019/06/rip-mask.svg);
    -webkit-mask-position: bottom;
    mask-position: bottom;
    -webkit-mask-size: cover;
    mask-size: cover;
}

Please remove this css and the background image will display. If you want to have an over in your background image, please add it in the background upper layer while the background image is added in the background lower layer.

And regarding the missing *.map files; those errors are just missing source-maps. They are requested by developer tools (especially in Safari) when possible, but won’t interfere with anything.

Basically it’s a way to map a combined/minified file back to an unbuilt state. When you build for production, along with minifying and combining your JavaScript files, you generate a source map which holds information about your original files. When you query a certain line and column number in your generated JavaScript you can do a lookup in the source map which returns the original location.

You can ignore those errors. Please check out this link for more information (https://stackoverflow.com/questions/19550060/how-do-i-toggle-source-mapping-in-safari-7/19823890#19823890).

Hope that helps.