for some reason paint-order is not working on chrome but https://caniuse.com/?search=paint-order

it says it is supported on https://caniuse.com/?search=paint-order but it's not working on text
27 Replies
Mannix
Mannix•2y ago
it works on mdn's example
Aozen
Aozen•2y ago
so for me it works on firefox but not on google chrome so the code goes like this
text-align: center;
text-transform: uppercase;
font-family: sheironRodina, sans-serif, arial;
font-size: 160px;

color: orange;
-webkit-text-stroke-width: 14px;
-webkit-text-stroke-color: #fff;
paint-order: stroke fill;
text-align: center;
text-transform: uppercase;
font-family: sheironRodina, sans-serif, arial;
font-size: 160px;

color: orange;
-webkit-text-stroke-width: 14px;
-webkit-text-stroke-color: #fff;
paint-order: stroke fill;
Aozen
Aozen•2y ago
on firefox it goes 1 look and on google another
Aozen
Aozen•2y ago
i am not doing anything fancy just 3 lines and paint-order is not working on google for me
Mannix
Mannix•2y ago
paint-order - CSS: Cascading Style Sheets | MDN
The paint-order CSS property lets you control the order in which the fill and stroke (and painting markers) of text content and shapes are drawn.
Mannix
Mannix•2y ago
does the example works for you in chrome?
Aozen
Aozen•2y ago
u mean the result/ ?
Mannix
Mannix•2y ago
yeah
Aozen
Aozen•2y ago
well it shows same thing but it could be the default i dunno cant edit the code
Mannix
Mannix•2y ago
that is what i see
Aozen
Aozen•2y ago
does it have to be an svg?
Noobtacular
Noobtacular•2y ago
Have you tried moving the paint-order property up above the stroke and fill lines?
Mannix
Mannix•2y ago
i mean fill and stroke properties are for svg's aren't they?
Aozen
Aozen•2y ago
it was working on firefox for text as i showed u above this was not on svg
Mannix
Mannix•2y ago
i had a feeling you are not using svg
Aozen
Aozen•2y ago
well what's the issue if i don't ? like why would firefox not mind but google breaks
Mannix
Mannix•2y ago
different browsers different engines they do what they want to do honestly this is the first time i learned about this property 🙂
Aozen
Aozen•2y ago
lol XD well i need it to work somehow issue is i technically found a way to make it work but not on chrome which is needed so i think i need to make an svg now and see if same properties work
Aozen
Aozen•2y ago
is there a way to make the height responsive also what is the x and y position based on here? parent container or other?
Noobtacular
Noobtacular•2y ago
Well a 14px stroke width will just about do what you are looking at. It will almost entirely overwrite everything.
Aozen
Aozen•2y ago
yes but not when i use the property i posted it should reorder how paint works
Mannix
Mannix•2y ago
you don't have to specify width and height on svg
Aozen
Aozen•2y ago
if i dont put height and width it is doingthis
Noobtacular
Noobtacular•2y ago
He isn't doing SVG.
Aozen
Aozen•2y ago
right now i am doing svg ( what do you mean ) in the example he was using svg
Noobtacular
Noobtacular•2y ago
Try -webkit-text-stroke-width: 4px; instead of 14px Why you using text properties like text-align: center; then? Well I gotta run. Good luck.
Aozen
Aozen•2y ago
the whole issue is the stoke should take from around the text not from within it so that is why i used paint property which makes it do as i want it anw good luck
Want results from more Discord servers?
Add your server