search

annamisak / dsn1676-term-project

Term project for web development
0 stars 0 forks source link

Cross-broswer transform-origin issue #2

Open annamisak opened 9 years ago

annamisak commented 9 years ago

I feel very proud of myself (Super yay!!!) that I was able to fix the transform-origin on all browsers with a little research. As it turns out, the transform-origin only worked properly on Chrome.

ISSUE 1 However, the solution is not perfect and it needs a little tweaking to make it. The animation works great except when the elements return to original state the transition does not apply the easeInOut very well in the JS. I tried to research the issue but couldn't find the answer to my problem. Something in my main.js needs to be adjusted, but not exactly sure how.

(solution for transform-origin https://css-tricks.com/svg-animation-on-css-transforms/)

ISSUE 2 Also, I was having issue with the colour not applying in FireFox. This problem occurs when I remove the css styling out of the svg (index.html) and move it to an external css file, but if I return the code to the index.html, the colours and gradations are back to normal. If I leave the css styling in index.html, it increases the amount of code I have there. Should I just leave it there or try to find a way to make it work in an external css file? But! I don't know how.

Thank you for your help in advance.

@thomasjbradley

thomasjbradley commented 9 years ago

Issue 1:

I don't have any experience with that Javascript, so I'm not sure how do debug it. Have you checked out their documentation?

Issue 2:

Yeah, just leave the CSS in the HTML if it works there, it's perfectly fine there.