redo svg filters, match font stack #1
Conversation
|
After testing it out, I can see that it's now worse in chrome. However it does look better in firefox When I zoom in on both chrome and firefox, they do look the same, so it's just a matter of how each engine scales svgs. I'm not going to merge this right now, since it does give a worse look on chrome now. Perhaps the better thing to do about the bevels is actually changing them to how snap draws them, as paths with a linear gradient. Sure, it'll bloat the svgs even more, but it might make it work better on both browser engines. |
|
hm, i was testing changes on chrome when starting out but assumed the later changes would be fine. it's all out of order now after all the rebasing. i should still be able to make chrome match firefox with some small tweaks. |
fits in better with snap block changes in later commits
fits in better with snap block changes in later commits
shadow edges aren't clipped twice. i don't think the old filter would blur in firefox but the general method used usually would. this new method uses patterns that shouldn't have that happen. this fits in better with snap block changes in later commits.
…scale previously filter bounds and particular effects (mostly feFlood) would cause some problems with element dimensions in firefox and make that element blurry and incorrectly positioned. many filters also had coordinates rounded differently between the browsers. this new svg filter act the same between browsers and is nicer and simpler in several ways
|
it looks almost exactly the same in both browsers to me? firefox 100% zoom: chrome has a harder border at 100% zoom and the fat borders at larger zooms isn't great (i probably turned the blur down too low), but i'm not getting what you have at all. |
similar to the previous commit, the block bevel caused blur and misalignment in firefox. this new filter is also more accurate in general due to other tweaks. it looks slightly different between browsers but it's close enough.
they contain serious bugs, make inefficient output, usually cause blur on firefox, and aren't much more ergonomic than writing out the filter manually.
|
i adjusted the bevel edges to add a slight bit more blur for when zoomed in (i don't think i can get away with more without messing up normal sizes) and reordered the commits from least to most invasive changes. you should be able to pull up to the blurry text fix for now if the bevel edges are still an issue. i think the text change is the most important fix out of the set. |
|
It might be a DPI thing, since I have my display scale set to 125%. When I change it to 100% chrome looks the same as firefox. Also, it still looks the same as it did before (or at least, I currently don't see any changes). 100% Display scale: Firefox 100% zoom: Chrome 200% zoom: Firefox 200% zoom: 125% Display scale: Firefox 100% zoom: Chrome 200% zoom: Firefox 200% zoom: |
|
i only made a very subtle change to the block's lighting. there's really not a lot of room for adjustment. maybe a convolution matrix could shift the text over by a physical pixel more reliably? it would probably be much simpler to just generate more svg nodes. give the text an id and <use> it for the shadow. i don't think more work on the svg filters is worth it. if/when you go down the route of making thousands of similar paths i'd recommend you just put each block once in <defs> and then reuse them as border images. i haven't checked if svg widely supports border images but if not you can simulate it manually with many <use>s and transforms. i've been using border images to render blocks with dead simple html for my own wip project. |
2 participants
this fixes blur in firefox (especially on text), gives the regular snap style much more accurate block borders and text shadow, and removes quite a bit of bad code.
there's several unrelated changes in these commits so feel free to cherry pick if one of the commits is real bad
before:
snap:
after: