Sage css is not working propperly in Mac safari

sage
1

Hi,
I developed a WordPress theme with sage. Unfortunately its CSS is not working properly in mac system .
Mac OS: Lion
Browser : Safari Latest
My site URL is secured (https://)
Rest of mac its working properly.

In Chrome when i check css path with inspect element the css path is wrong.
Eg: Some css styles are coming from /bower_components/magnific-popup/dist/magnific-popup.css and some /source/main.css
but all css included in this path /wp-content/themes/theme-name/dist/styles/main.css
and in Firefox its working properly :slight_smile:

2

I’ve noticed this as well and I wonder if it has to do with the size of the compiled CSS with Sage.

Here’s what I’ve observed: I only start to notice this problem toward the end of projects when my CSS has gotten more complex or lengthy; it happens particularly when I do a lot of @extends with .btn and .row both of which seem to generate an unwieldy amount of CSS when compiled.

So I think the problem is with Safari being unable to handle source maps for very, very long CSS, not with Sage itself.

1 Like
3

I would agree. I use Safari by default, and thought development there are times when Safari starts producing CSS glitches. Chrome loads them fine, and rebooting my system seems to fix the issues.

I’ve also had various DNS issues which affect only Safari when working with the trellis vagrant machine, which while not directly related, makes me think Safari just isn’t the best browser for development with roots software.

1 Like