All threads / Trix issue driving me crazy
Ask A Question

Notifications

You’re not receiving notifications from this thread.

Trix issue driving me crazy

Trinity Takei asked in Rails

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.

https://cln.sh/IdFfnZ

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.

https://cln.sh/0yE6hi

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 :(

Join the discussion

Want to stay up-to-date with Ruby on Rails?

Join 68,099+ developers who get early access to new tutorials, screencasts, articles, and more.

    We care about the protection of your data. Read our Privacy Policy.

    logo Created with Sketch.

    Screencast tutorials to help you learn Ruby on Rails, Javascript, Hotwire, Turbo, Stimulus.js, PostgreSQL, MySQL, Ubuntu, and more. Icons by Icons8

    © 2022 GoRails, LLC. All rights reserved.