Verified on CrossBrowserTesting via Codepen: problem seems to be strictly with portfolio section, on older mobile browsers (defined by myself for convenience as: Mobile Safari < 8.0, Android Browser < 5.0).
I would guess it could be invalid HTML or something to do with Angular implementation of SVG injection, which someone on fCC Forum helped me with and I’m not too familiar with. I want to redo SVG to include image of phone as well, but before I do that, I would like to understand what’s causing the portfolio issue on certain browsers.
I decided I don’t care so much about SVG not being supported by older browsers, and found a way to do the image injection in JavaScript. That may even fix the problem on older browsers if it was an issue of using Angular (haven’t tried it yet).
Do you mean just making var graphic = `...markup...`;
and then cloning that rather than the jQuery $('#graphic'),
do you mean using expression interpolation, like putting the whole SVG markup inside the for loop, and adding <image xlink:href="${laptopImages[i]}",
or do you mean something else?
Browser support with above JS method already better than in original with Angular, FYI. I’m now just seeing a lot of space between each set of SVG devices on the older mobile browsers defined above; originally, the SVG sets were greatly reduced in size and there was a LOT of space between some of the sets.
Sorry for the delay in replying. I joined a cohort (it’s awesome) and haven’t had as much time for FCC forums.
I meant mostly the latter (expression interpolation within a loop). Primarily to move all that markup out of your html and into your logic. Something like this (VERY hasty) pen:
Edit to add - I’ve only recently learned about template literals - my code can almost certainly be optimized. Please critique!
I’d love to be part of a cohort. I take it you didn’t find it on fCC Forum(?). What project(s) are you working on as part of the cohort?
I’m still noodling on my portfolio. Put it on github pages, but when I test it on crossbrowsertesting (of course, if it’s not on Codepen, you can only test it on two mobile devices for free), results aren’t promising. How do you test stuff that’s not Codepen? None of the free apps seem to actually emulate mobile browsers.
I may figure out how to use SVG fallbacks, or just use actual image files. In any case, I’m happy to have learned a lot about SVG.
Cross browser testing is the best method I have. You could try collecting old devices! I sometimes annoy friends to test my stuff on their iPhones.
For static code analysis, check out https://codeclimate.com/ It’s free for open source repos. I recently used it on the project my cohort team is working on. It complained like crazy about missing css vendor prefixes. That’s after we used Autoprefixer.
I heard about the cohorts in a FCC thread a while ago - I can’t find that thread now, though. But they’re not officially part of FCC. Go here: https://tropicalchancer.github.io/projectus/
There are more cohorts than shown there. I’m in “Meerkats”, which wasn’t listed when I applied. There might still be open slots for the March/April cohorts. If you do join one, I highly recommend signing up for a challenge project. The cohort consists of 25-30 members. Out of that, teams of 6 sign up to tackle the challenge projects. Your team - a distributed group of strangers - has to actually build something together.