Internet Explorer compatibility

[jATfreeshell]

Hello, with win10/IE11 and win7/IE9 it looks like no css is working

[hughbris]

Thanks for the report and screenshot with details :)

I don't have a straightforward way to test on IE. Mostly my care factor is low for this broken browser but I understand it's a thing (unfortunately).

Would you mind testing the original theme demo for me? I think this URL shows you a frameless unbranded version: https://templated.co/items/demos/solarize/. They don't officially link that.

That test will tell me if it's a problem with the original theme or my implementation. I have almost completely faithfully rendered the original theme for Grav.

As I mentioned in discussion in issue #5, I dislike the way Templated's theme use JS to call CSS. That just seems risky and this kind of problem is proving my point. I intend to see if I can pull in the CSS ye traditional way to make these issues go away. Your report might hurry this up.

Cheers again

[jATfreeshell]

Hi Hugh, You are right! https://behold.metamotive.co.nz/solarize still have the Internet Explorer issue, while https://templated.co/solarize and https://templated.co/items/demos/solarize/ are looking ok.

If it can help, I attach the diff file between the release I've just downloaded from your link (wget https://templated.co/solarize/download) and the one I've downloaded yesterday from grav official repository at https://getgrav.org/download/themes/solarize/0.1.2

solarize-diff.txt

I agree with your opinion about js and css. Cheers, Gian Marco

[hughbris]

Thank you for the diff. OK from a quick look, it seems that this is indeed something I added myself without checking for IE compatibility (or maybe not caring? I don't remember doing it at all!). IE does not support document.currentScript in any version. Hmmm. That means themeCSSPath is not set and none of the CSS loads. I can see CSS 404s using "undefined" in the path in the server logs too.

So I considered three approaches for a solution:

1. find a JS polyfill for IE
2. find another way possibly using jQuery
3. rather than data attribute, pass the theme root to the script via URL parameter and extract that.

The first seemed unreliable, especially for IE11. I found a way using the second method with jQuery and there are a few variations. It produces the correct CSS path in my non-IE environment. Could you test it in IE?

Substitute this line for line 9 in js/init.js (or simply add after) in the theme:

var themeCSSPath = $('script').last().data('theme-root') + '/css/';

I am pretty sure the third method could work too.

Tell me how that goes, or submit as a PR, and I'll push out the fix. Thanks Gian Marco :)

[hughbris]

currentExecutingScript might be a better way to implement this fix. I'm just trying to figure out exactly how to use it since I am somewhat ignorant about JS interpreters :/

edit: better way because if someone overrides the script block, it probably won't break.

[jATfreeshell]

Wonderful! after a fresh install of solarize theme with # bin/gpm install solarize I changed the line as You said:

....
(function($) {

//      var themeCSSPath = $(document.currentScript).data('theme-root') + '/css/';
        var themeCSSPath = $('script').last().data('theme-root') + '/css/';

        skel.init({
....

now the theme is working fine in my Windows 10 PC with IE11, Firefox 66.0.5 and Brave 0.64.77. and in my Samsung smartphone too. Thanks a lot! :-) Ciao, Gian Marco

[hughbris]

This is now fixed as v0.1.4 and deployed on the demo site.

If I find out how to use the currentExecutingScript and decide it's safer, I'll switch over to that.

I don't think I can easily remove the JS loading CSS as it seems tightly integrated with the skel framework used. It's actually a bit jarring on slow connections and machines when the CSS is applied late :[

If you like, give me your site's URL when your site is done and I can link it in the examples list :)

Cheers