I am using the black and white circle in my project when I noticed that on ios chrome the white circle is larger than the black circle.
● - U+25CF ○ - U+25CB
In a desktop environment the circles appear to be the same size but have slightly different heights. The difference is not noticeable.
I am trying to make these circles the same size on ios chrome.
I feel like I have eliminated any variables and that the browser is responsible for the different sizes of these circles.
Actually, as far as unicode is concerned, all characters are font dependant. When a certain character is not available, it is picked from a fallback font.
If you had not configured a custom font, or if these chars are not available in the font you picked then the different sized circles are in the default font used by chrome/ios.
So, you have two ways to go: either find a font that have the characters drawn in a way that suits you, and force that, or give-up using unicode characters for these glyphs and use inline images instead.
You could make use of SVG drawings which can be encoded within the HTML markup itself, that will ensure a consistent look.
