This week I fixed up some design issues on my capstone site, that took an unexpected amount of time. I made my navigation responsive, made some other stylistic changes, and I converted my logo to an inline svg format on the site. When I did this I ran into some cross browser compatibility issues. Chrome and Safari treat svgs much differently than Firefox, where I like to develop most. The inline code svgs do not appear in Chrome or Safari unless you specify the width and height of the svg. I did some reading and many sources stated that Chrome and Safari, when not supplied with a height and width choose a standard size, but this did not prove to be true.
When fixing the issue I started with an inline width and height as suggested by some. This worked, but for responsive scaling again Firefox was happy to continue using my css, but Chrome and Safari seemed incapable of overriding the inline css… … I ended up setting the width and height in my stylesheet instead and trying that, however still Chrome and Safari refused to scale down the graphic when I altered width or height… Through further debugging I found out that I had to use transforms with scale to make those browsers happy.
When I added a small css animation to the logo, I ran into a similar problem as well. Firefox was happy with keyframes referencing changes in distance from the top, but for Chrome and Safari I discovered I need to instead do transforms with translate. I have managed to get all of these bugs sorted, as far as I can tell. I’m glad I ran into these issues though, because when I begin adding more svgs to the pages canvas free I will hopefully not have to struggle with Chrome and Safari again.
I have also continued studying the create.js documentation and will begin implementing more changes this weekend.