Trix issue driving me crazy
Hey folx,
I've been banging my head against the wall for the past two days, and I'm at this stage where it's time to ask smarter guys than me (cough, cough Chris) to help me out.
This is a 7 year old Rails 5.2 app, pretty vanilla, jQuery, CoffeeScript, nothing out of the ordinary. We have added action text a few months ago and lived happily ever after... until now.
I have been working on a long-running branch, refactoring a bunch of things, but nothing specifically w/ trix, I didn't even add new CSS.
I thought my branch is ready to be merged, but the PR reviewer pointed out that trix looks funky.
That's indeed not looking great. The problem is that both the icons and the text are displayed on the buttons.
I tracked it down to the CSS property text-indent: -9999px; attached to trix-toolbar .trix-button--icon.
If I change that to 9999px (ie remove the minus sign), everything works perfectly.
However...
1) I don't like this solution. The docs say it should be -9999px; I'd rather understand wtaf is going on here.
2) even worse: it works on my machine with -9999px; - and it seems to be the only machine! We've tried linux, mac, various browsers, the exact same browser version I'm on on other machines etc. and it doesn't work for no one except me! So with either setting, it's going to be broken for someone.
So... there's at least one machine that needs -9999px; and the rest need 9999px;
I'm not a CSS guru, and I don't know where to even start?! If at least the behavior would be consistent across all systems/machines/browsers, then... I still wouldn't know :P but this makes it so much worse.
Any ideas/pointers?
Chris, maybe Obi-wan you are not, but our only hope you are! 😂🙏🏽
Might be a stupid question, but it's worth asking... Have your tried different a browser on your machine?
Something else worth trying. Go to your Developer Console > Application > Clear site data. Could be some cached CSS that happened on your machine during development
No stupid questions at this point!
Yes, I have tried FF/Chrome/Safari, also on other machines - same thing, it works in all browsers on my machine, doesn't work in any browser on any other machine.
I have also tried to remove cookies/bust the cache etc. Nothing :(