Portfolio SVG Not Working on Older Mobile Browsers

Portfolio SVG Not Working on Older Mobile Browsers
0

#1

Was playing with my mother’s Samsung Galaxy S5 and noticed portfolio section of my page is a mess.

Full, Editor

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.

Thanks in advance!


#2

What happens if you just paste the XML right in your markup? That would eliminate angular from the set of possible problems.

It may be just that the older browsers literally don’t support svg:

http://caniuse.com/#feat=svg

Svg is cool, but if you need broad browser support I think you will need to stick to actual image files.


#3

You can also fallback to an actual image. As always, CSS tricks:


#4

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).

Codepen

Without researching it yet, I’d guess it’s a relatively small % of the population who use browsers that don’t support SVG, anyway. Opinion on this?

Thanks again!


#5

No need to guess! That Can I Use page shows 96.88% of browsers globally can use SVG, with 0.77% having partial support. Pretty damn good!


#6

I took a look at your code. So, you create the markup for one set of the svg devices and then clone it for each image in the array? Slick!


#7

Browser support isn’t great - especially on mobile - but you could stick the markup inside an ES6 ‘template literal’


#8

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.


#9

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!


#10

Oddly, codepen panics when I move the template generation into separate functions, and directly return the template literal. Like:

function generateIpad(work) {
      return `<svg width="29%" viewBox="0 ... `;
}

Codepen, for whatever reason, adds a ; in between the return and the template literal. FF dev tools shows me:

The fix is to assign the template literal to a variable, and then return the variable. Codepen demo.

Hosting it locally or on github pages works fine - no added ;. Repo here.


#11

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.

Edit: Re: testing in the bigger picture, I’m going to check out some of these: https://forum.freecodecamp.com/t/best-technologies-going-forward/58077/8?u=icartusacrimea


#12

Cool portfolio :smiley:

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.