Streaming live at 10am (PST)

CSS not loading in Safari


#1

Hi, I have created a slider style display of photos using IX2. I am testing it in different browsers and there are two issues at the moment that I am having difficulty resolving.

One is in Firefox on the MAC, it seems background images are scaling from top left of the DIV rather than a centre point origin. Displays fine on MAC in Chrome. Do I need to use a render engine specific to Mozilla on Mac? I have called Webkit on any divs being transformed in the animation.

The other problem is that Safari 6.1.6 on Mac is only displaying HTML and seems to be blocking the CSS completely. Is there a work around for this or could a particular element of the animation from IX2 be stopping the CSS from loading?

http://john-sherwin-design.webflow.io/

https://preview.webflow.com/preview/john-sherwin-design?preview=3e416d6c4e134624974607feaf02fe2e

Any help would be much appreciated, seems like the final hurdle to clear these two points before I can launch the site.

Best,

John


#2

Maybe the Safari version is too far back? But just concerned about Firefox display.

Does webflow code automatically add -webkit- and -moz- prefixes?


#3

I think I have figured out the transform-origin problem, there are known issues in Firefox, specifically in later browser versions with SVG, although it doesn’t state it it seems that this also applies to background images. When I change the image from background to a regular image element Firefox respects the specified origin point for scaling.

Also in relation to the no display of CSS on Safari I can see this message in the Web Inspector, it seems that Safari security is not allowing the webflow .js and .css files from uploads-ssl.webflow.com. Error messages is:

Failed to load resource: An https://uploads.ssl.webflow.com/5a34213a2e772e0001703cb4/css/john-sherwin-design.webflow.9e06d206f.css SSL error has occurred and a secure connection cannot be made

Same for the .js file.


#4

Hi @johnsherwin, I am not sure if this helps, but when I looked in later versions of Safari, I was unable to detect any issues with the css loading in Safari.

When I went to display the site on Safari 6.2, I got the message: https://cl.ly/2d3J1M2X2p2D

So I assume 6.1.6 will not work either.

Although I am not 100% sure, I do see that there are some SSL errors: https://cl.ly/0s2I073s043L, this is likely due to TLS 1.2 support not introduced until later versions of Safari.

I hope this helps.


#5

Hi Dave, that’s helpful alright, I have been seeing SSL issues and wondering if I should be trying to work around them.

I added some custom code from browserupgrade.com to present that message, I was guessing about what versions will work based on tranform compatability from caniuse and when browsers stopped needing -webkit- prefix.

The home page imagery transitions are reliant on CSS transforms and I ran into more difficulty than I expected :slight_smile: Ever the optimist.

I am going to use browserstack over next couple of days to get a firm read on what browsers are problematic.

I suppose there is not much that can be done about versions that Webflow js is not supported for. I imagine cross browser compatability is too dependant on methods used for there to be a definitive list. Also maybe Safari 5 and 6 are old enough are this point to not be supported. Thanks for letting me know about later versions!


#6

@cyberdave - Is there any documentation or a list of browsers that TLS support is not provided for? This would be a useful baseline for browser compatability as browsers without that support simply cannot load webflow JS.


#7

Hi @johnsherwin, Webflow does not have a ready-made resource for this, however I was able to find this: https://help.salesforce.com/articleView?id=000220586&language=en_US&type=1

I hope this helps


#8

Hi Dave, thanks for that, I didn’t think about just checking for compatability with TLS outside webflow. That seems perfect and thanks for making the effort to search for it.

Best,

John