CSS Positioning inconsistent across browsers
I have this cute little svg/psedo-element positioned 12px to the left from the border of the parent element... In chrome, it looks okay, but in firefox and microsoft edge looks much farther away than i have set.
Its parent has
position: sticky and the pseudo-element has position:absolute
I do have a css reset applied,. I also inspected to check if firefox was adding styles that weren't in my reset, but that doesn't seem to be the case...
Their computed values seem correct... 64px wide, and 12px to the left as shown in the image... So I can't think of anything else to check, or maybe I'm just too tired to think
codepen: https://codepen.io/bavosadev/pen/vEBQbqm
13 Replies
You see how in Chrome, the area of the element in blue overlaps the "S"? While in firefox it doesn't... what could be the reason for that
do you have both a viewBox and w/h on the svg element?
yes
i'd have to see an example to debug most likely
both do handle svg differently though its a pita sometimes
shakes fist at FF
its always FF's fault
the new IE
if it helps, the svg is being render as background-image of the pseudo-element
š
i'll try to remake it in codepen
sorry for not have done that before hand
Here's the codepen... i had to hard code the svg position bcs i couldn't add as a background-image on codepen
https://codepen.io/bavosadev/pen/vEBQbqm
Yet, the same behavior appears in Firefox and IE
I tested it on Safari. SVG element is even more farther away than on Firefox or IE š
Not at my PC anymore but I'll check when I am, looks way off on edge too I'll have to look closer
The problem may be chrome? I bootstrapped it, and now it has the same amount of distance as firefox, IE and safari
and they're not overlaping...
I think i found the issue... it might be because of absolute positioning
will try to directly insert the svg into the markup, instead of using a pseudo-element
only had a quick look but it seems that the heart of your problem is your SVG is 84x84 but the design inside it is only about 20x20. This leads to 60 some pixels of white space to the right and bottom of the icon that you are having to work around.
yeyy i managed to fixed šš»
Instead of positioning it in relation to the entire header, I positioned it in relation to the "soluciona+" logo. I believe this was the problem... the header has a dynamic width (I'm using clamp) so any different calculation would move the pseudo-element
it's a pseudo-element of "soluciona+" element now