IOS Safari Issue

[Luxas]

Hello,
im 15 years old and from germany;
Sorry for my bad english and my bad code.

I have 2 problems on this website (lucasmucmc.com/contact):

HTML:
lucasmucmc.com/contact/index.html
CSS:
lucasmucmc.com/contact/style.css

I started learning about SVG today and already have a problem where i cant find any solution int the internet for:

The Red Stars on this page are working fine for (WIN10: Chrome, Firefox, IE, Edge); but on the Safari browser on my IPhone they are Invisible…
But after trying a long time i figured out if i remove from (line 84 of the html code) the ‘height=”5″ width=”5″‘ attributes, it is visible on my IPhone BUT it is now in the completely wrong place in Internet Explorer.

To show it to you i removed ‘height=”5″ width=”5″‘ by the first star (the name input) on my webpage that you see bouth ideas at once.

The second problem is again ONLY IN SAFARI MOBILE:

I dont know why but if i set the margin form (line 37 of the css code) to 0 there is still an margin left and right around the form. The same thing is with the padding (line 36 of the css code) in the form. To make matters worse the Input fields dont have the same size like the send button.

PLEASE HELP!!

Thank you,
Lucas

[waydeshepard]

For the first problem, have you tried setting a class on the svg icon and then setting the width and height in the css file? as for the second problem I suggest using something like Normalize.css it might help with your margin and padding problem

[mapesa123]

hello

[Luxas]

I already have included the normalize.css and I have set a class on the svg (.star) to control the Color, the position and height :(

[waydeshepard]

I fixed your star icon problem by extracting your svg path data to a symbol tag at the bottom of the page, and then xlink:href them to where you had used the svg in all the spans. Heres a pen solving your problem so that you can follow what im saying. I also added padding:0; and width:5px; to the star class. Hope this helps you some :)

See the Pen
Star Problem Fix by Ryan Shepard (@rshepard21)
on CodePen.

[Luxas]

Thank you @waydeshepard for your help.

But three more question: Is there an need for the “>title>star_icon>/title>” tag? And why have you removed “xmlns=”http://www.w3.org/2000/svg”” from the svg tag? And by searching in the internet (to understand your solution) i found on the mozilla developer page this snipped “xmlns:xlink=”http://www.w3.org/1999/xlink”” for adding in the svg tag. Is any of this required or usefull?

I added “fill=”currentColor”” to the path element to make it red again.

Thank you,
Lucas

[Luxas]

I fixed the 2nd problem by removing the @supports rule.
It should adapt the website to the Iphone X, but it looks like it is not working properly.
Maybe it’s because I have the “IOS 13 developer beta 6” on my phone, which is still a beta, and thus apple has not fixed all the bugs.
Maybe it works on every other iphone.
But for now I will remove it.

However, I have bad news. I found a new bug; There is too much space under the form, it should be the same distance above the form as under the form (5vh; line 37 css). Why is it not working? :(
This problem is in every Browser…

I think the solution is easy, but im just to stupid…

[waydeshepard]

On the svg at the bottom of the page, add display="none". As for your other questions I myself hardly ever use xmlns=”http://www.w3.org/2000/svg it is totally up to you to use that.

And to my understanding in the symbol tag the title isn’t really required. I just use it so that i know which icon is which.

[Luxas]

Thanks @waydeshepard,
all problems are now fixed. :)

I’m really glad someone took the time to help me. I wish you a nice day and good luck with future projects.

Best regards,
Lucas

[StormFiber]

Hey, I already have included the normalize.css and I have set a class on the svg (.star) to control the Color, the position and height.

---

Reading Parallel Paradise

[Author]

Posts