search

rjrudin / slush-marklogic-spring-boot

slush generator for an Angular/Spring Boot/MarkLogic application
Other
10 stars 7 forks source link

Missing icons in IE11 and HTTPS after refresh #60

Open maeisabelle opened 6 years ago

maeisabelle commented 6 years ago

Hi!

I was using slush-marklogic-spring-boot for our current project and the testers raised a bug where icons are missing after refresh.

I found that Font-awesome has an issue with IE11 and HTTPS same as what is happening here:

https://github.com/FortAwesome/Font-Awesome/issues/8825

Suggestions are to remove no-cache in the HTTP headers Cache-Control and Pragma. Spring Security automatically adds these headers but it can be overriden per request. I don't want to disable the no-cache totally as it is not recommended so I tried to create a subclass of WebSecurityConfigurerAdapter to add caching for static resources such as css but it still didn't work.

Another suggestion is to change the IE settings to allow font download and to change the Server caching but since we have limited control on the IE settings and we want to minimize changes on the server (we are using Tomcat Server), I did a workaround:

I added this inside the head tag of the index.html

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
<script>

      WebFont.load({
            custom: {
                  families: ['FontAwesome'],
                  urls: ['//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css']
            }
      });
</script>

I used Web Font Loader to load the CSS from CDN. This is a workaround if the browser (so far, I only encountered this in IE) fails to load the fonts locally.

I think we can still improve this. Feel free to improve the code and apply this to this project and other projects if you need to support IE with HTTPS. Note, I haven't tried this in slush-marklogic-node.

cphorvath21 commented 6 years ago

Thanks @maeisabelle for providing more information here on your approach and fix. We too had the same issue with our rails app, which updating to the latest font awesome did not resolve on its own. We had been using the font-awesome-sass gem and serving up font-awesome along with our other assets via AWS CloudFront (Not that CloudFront is particularly the culprit here). We removed the gem and changed to loading with Web Font Loader as you suggested. We did something similar for the latest font-awesome version, adding to a partial haml layout since we had two locations to add it to (customer front-end & admin back-end):

%script{ src: 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js' } :javascript WebFont.load({ custom: { families: ['FontAwesome'], urls: ['//use.fontawesome.com/releases/v5.3.1/css/all.css'] } });

Interestingly, when we had the issue, investigations with IE devtools showed that on the initial page load it would only try to load 3 font-awesome assets, but on a refresh when the icons disappear, it was trying to load 6:

https://<assets-distribution-subdomain.webapp-domain.xyz>/assets/font-awesome/fa-solid-900-52f6d77a005727f4b92051119e76e9956b7ee71bf2c22385819afb1a86d28aa4.ttf https://<assets-distribution-subdomain.webapp-domain.xyz>/assets/font-awesome/fa-solid-900-48745629a252fb4e8d2750527c0d49341c2c17d5fe5bc6a37ec82b062ae84c9c.woff https://<assets-distribution-subdomain.webapp-domain.xyz>/assets/font-awesome/fa-solid-900-263c75a8cab8bdd6b642f29ddbf3bbb0b83af4a66e45604c93cbbf970996b5b3.eot#iefix https://<assets-distribution-subdomain.webapp-domain.xyz>/assets/font-awesome/fa-regular-400-cd1f39fb0b97cd031b9c66cf3c11e893bffb3371dcb815853a1bacd455b563d4.woff https://<assets-distribution-subdomain.webapp-domain.xyz>/assets/font-awesome/fa-regular-400-ae5af4edddc9b060c2ef509cb09ebe1a4683e689633811434680df319fea5107.ttf https://<assets-distribution-subdomain.webapp-domain.xyz>/assets/font-awesome/fa-regular-400-473a9adc2b00aa237a66b820706d1c0255efb0fe6864760042fd576be97fd9ae.eot#iefix

Now, with the font awesome icons loading correctly in IE11, there are just three relevant font-awesome items being accessed:

https://use.fontawesome.com/releases/v5.3.1/css/all.css https://use.fontawesome.com/releases/v5.3.1/webfonts/fa-regular-400.eot?#iefix https://use.fontawesome.com/releases/v5.3.1/webfonts/fa-solid-900.eot?#iefix