I have a react component that contains an svg. It has transform: translate(-3.75%, -3.75%); style that is applied to it. On Mozilla the style is visible and it seems to work, but on Chrome or Edge it does not. I also added -webkit-transform: translate(-3.75%, -3.75%); and still no change on the mentioned browsers. I made sure I do not overide any other style or if the browsers are compatible with the css property.
I checked on Chrome Dev Tools the styling applied. It had the transform:translate property crossed and left with the -webkit- version, which means it did apply the style, but somehow it did not. On Computed tab in the styles of the element there was the transform property but it was not bound to the element it self.
2
Answers
Some browsers support the
translate: x yproperty instead of regulartransform: translate(x, y)which is more widely accepted. So if you use the first one you may find some compatibility issues. But this is not your case.What you are using is compatible with the mentioned browser and therefore I suppose the issue is in how the browser interprets something at a higher level such as on the container. I believe we need more information to answer that though.
as you mentioned the code bellow should work:
But there could be others factors affecting this.
Check if the parent elements of the SVG have any CSS styles. Make
sure there are no conflicting or overriding styles.
If the SVG has certain dimensions or positioning that could affect
the translation, ensure that it is properly sized and positioned
within its container. Check if the parent container has any CSS
properties, such as overflow, position, or display, that may impact
the rendering of the SVG
Also check if the selector targeting the SVG element and applying the
transformation has sufficient specificity. It should be specific
enough to override any conflicting styles. You can try using a more
specific selector or using inline styles directly on the SVG element
for testing
.