html - Prevent inline SVG pixel snapping in chrome -


i have svg i'm using show wavy edge on div. svg needs display same div due sub pixel snapping/rounding alignment varies resize. firefox seems work fine. see demo:

https://jsfiddle.net/meojwnlv/

when using svg background image background-size:100% auto; scales correctly want able change color need inline.

how can prevent happening? thanks

it looks chrome snapping height and width of svg object integer values. since svg's width larger height, every 1px change in height of svg causing width change 10px.

viewbox="20 20 900 66" 

there's easy workaround — make svg taller:

viewbox="20 20 900 500" 

here's updated jsfiddle.


Comments

Popular posts from this blog

python - TypeError: start must be a integer -

c# - DevExpress RepositoryItemComboBox BackColor property ignored -

django - Creating multiple model instances in DRF3 -