7 ms·
A Firefox-only minimap (2021)
- aetherspawn 3y agoEvery day I hit sites that literally only work in Chrome.. it’s time to fight back :)
- williamdclt 3y agoI exclusively use firefox, have a pretty normal browsing pattern, and that almost never happens to me! Much less that once a month, maybe once every 3 months
- larrik 3y agoSame For whatever reason car manufacturers are the worst at it. Microsoft is also pretty bad (worse than Google).
- iends 3y agoFinding one once every few months sound about right but usually the bugs impacting Firefox users are major PITA. Some I’ve had over the past few years: * myADP had some kind of bug preventing firefox authentication that lasted months. * Elan financial redid their credit card site for fidelity visa and had a CSS bug that hid the card total balance. This lasted for about a month. * bitbucket (work required) had this bug that prevented pages rendering in firefox. It was some kind of JS client side bug and it impacted a bunch of people in my company. After months of support request they gave us some console commands that opted into an experimental feature which resolved the issue. This one was especially frustrating as they kept telling us to just clear our cookies and delete our profiles. * Some random IRS system I had to use for either requesting a tax transcript or validating my identity just didn’t work. It’s actually been so frustrating my coworkers joke anytime there is a bug I’m experiencing that it must be another Firefox only bug.
- isanjay 3y agoOpening fastmail in Firefox crashes the whole browser. I don't know why. I stopped my subscription due to that.
- nicolaslem 3y agoI have used fastmail in Firefox daily for years, never had an issue.
- isanjay 3y agoWell maybe it only happens for me. Not only the page becomes non responsive the whole browser becomes non responsive.
- danShumway 3y agoYeah, something is going on with GP's browser. I have Fastmail open in Firefox right now, I've never had an issue with it. I'm not saying that to dismiss the problem, I believe GP that it's crashing; more bringing it up to say "there is something going wrong here that's not at the browser/site level that could potentially be fixable for you on your local device if you want to use Fastmail in Firefox."
- wing-_-nuts 3y agovanguard's website can't edit holdings with firefox. I reported it years ago and literally nothing's been done.
- aembleton 3y agoI've never had a problem on their UK site [1]. It might be a different code base. 1. https://www.vanguardinvestor.co.uk/ https://www.vanguardinvestor.co.uk/
- politelemon 3y ago> myADP For years they had a terrible implementation that only worked in _old_ versions of IE. They had no incentive to change because they were the main players in that space. I loathed them because their tagline was "Anytime, anywhere" which was clearly missing an asterisk.
- mrweasel 3y agoNormally it's something else, like a plugin. To be honest I don't notice much, frequently I assume it's some tracking that's blocked which courses the site to not function and just move on. Between blocking tracking, with DuckDuckGos privacy plugin, and using Firefox I'd say that blocking tracking breaks WAAAAY more sites.
- krylon 3y agoI recently installed adguard on my home server, and it did indeed break a few sites.
- KnobbleMcKnees 3y agoAgreed. I regularly have to do a little "disable for site" dance with uBO and Privacy Badger to even get certain websites to load. It's kind of convenient in that it gives me an inflection point where I can choose not to use that website or service at all.
- ben-schaaf 3y agoThe times it does happen I've found more often than not switching the user agent fixes it...
- treyd 3y agoI simply refuse to use websites if they require Chrome. I find some other way to do whatever it is I'm trying.
- jorvi 3y agoLogging into PSN was (is?) broken for a very, very long time. It was for at least 1.5 year, but I switched after that so I couldn’t tell beyond that.
- Semaphor 3y agoSimilar for me, I’d say it’s actually more like once or twice a year. More if you count sites that are specifically about Chrome experiments, which sometimes get linked from HN.
- WorldMaker 3y agoOne factor I've found is the intersection of Enhanced Tracking Protection and Multi-Account Container in Firefox. I'm seeing daily "Please stop using an ad blocker, Firefox is an ad blocker, please use Chrome, this site works best in Chrome" banners and ad walls and paywalls and other similar cranky anti-patterns. It fascinates me how many people I know have uBlock (Origin) installed in Chrome and see nowhere near as many whiny banners and "stop running an ad blocker" nonsense as I see running Firefox without an ad blocker just ETP and MAC. The people complaining "Firefox is an ad blocker" are making it clear that they don't actually care that you are blocking ads or not, they care that you are blocking trackers and hate you for trying to maintain a semblance of privacy. Keeps saying the quiet parts out loud. Most of the sites that do that are a "close tab and ignore" thing, some are a sequester to their own account container and feed them garbage (create a dumb account for them, turn off ETP just for them just in that container). It is still only a once-a-month case where such a site I need to get something done on is entirely broken in Firefox and I need to open it in something Chromium based, but that's still too often and getting worse. But that "Firefox is an ad blocker, please use a less private browser" is a daily annoyance for me for sure.
- aetherspawn 3y agoIt's usually super critical things that don't work, for example: I couldn't apply to become a registered engineer in my state using Firefox because the form was in an iframe, and for some reason the iframe didn't render on FF. The credit portal for Shell Fuels only works in Chrome and doesn't display at all in FF due to a console error. (Enough of the page renders to make you think that the page is complete but i.e. the buttons to apply or make a payment don't render). The field for setting the date of a consultation (work) in our accounting package doesn't work in FF, and no matter how many times I write to their support team they just write back with "Firefox is not supported, please download Chrome". There was a similar attitude at a software company I worked prior, but I managed to wear them down and get Edge (modern), Firefox and Safari on the QA supported browser list with the reasoning that they are the default browsers for Windows, Linux and macOS respectively. But come on, browser standardization is so good these days I honestly don't understand how people are making pages that only work in Chrome?
- jjice 3y agoYeah it's upsetting the sites that I run into this on, especially since there's no excuse in 2023. On more obscure pages on Vanguard's website I've run into some broken stuff that results in console errors I don't remember, but switching to Chrome made it work :/
- wing-_-nuts 3y agoyeah the edit holdings page is broken in FF
- drewg123 3y agoSpeaking of that, I've had issues with Firefox (both on Mac and Linux) where some checkboxes just don't appear. I was checking in for an international flight last month on American, and could not manage to get through the checkin process until I discovered there was a checkbox I needed to tick that didn't even appear on Firefox (but which did on Chrome)..
- ricardo81 3y agoYes. It reminds me of when there were rumours/(facts?) about open source sabotaging of FF. I see a lot of instances where pages worked fine on FF but now they don't, and sometimes I have to fire up another browser. I really hope that's not the case. I use FF by default.
- themoonisachees 3y agoSpoofing your user agent to a chrome one will make most of these sites work. They're just not interested in allowing you privacy.
- cornedor 3y agoIs this a geographically local thing? This happens very rarely to me, although I there are some (Google) sites I use regularly that do work worse on Firefox than Chrome.
- marginalia_nu 3y agoI don't think I've come across that yet with Firefox.
- bogwog 3y agoThis would be cool to have for an online code editor or similar, but otherwise I hate these types of custom navigation things on websites.
- Brendinooo 3y agoHonestly I didn't notice it until it was pointed out by the article. Banner blindness has done a number on me. Pretty cool thing here, just wish I could use it to navigate. That's the biggest reason why I keep a minimap on in VS Code.
- CAP_NET_ADMIN 3y agoI've been using Firefox for the past year due to some weird incompatibility between my GPU and Chrome's video decoding. It caused dropped frames and caused my YT quality to go down. Haven't really noticed any issues on Firefox except the lack of actually good web translator. -moz-element looks sweet, hope it comes to other browsers.
- johnnyworker 3y agoI have been using Firefox ever since Opera bit the dust, but I have been trying, so hard, to use Vivaldi the last 3-6 months, mostly because it offers a portable version out of the box that discovers profiles just by looking at folders, i.e. super sweet for syncing. But it's such a dog. Even after turning off mail and feeds which just sit there eating CPU like candy, I just can't make it fast, and returning to and cleaning up my Firefox made it so snappy, I'd rather stick to my 3 profiles (normal,dev, media) and do the rest via Bookmarks. And for all the sweet UI options and configurability Vivaldi has, with Tree Style Tabs and some addons for it, and hacking the UI CSS, I am sheepishly making Firefox my primary again, pretending none of that happened. I wish it cached compiled WebGL shaders though. That is the only thing where Chrome beats it to a pulp sadly. Maybe there are config tweaks, I haven't looked into it, but out of the box reloading a page with a lot of shaders is basically instant in Chrome, even on mobile, and can take ages on FF, depending on the shaders.
- EspressoGPT 3y agoWhat a shame that it doesn't seem to work recursively.
- miohtama 3y agoWith Firefox and CSS background you can open a portal to another dimension
- newaccount74 3y agoThat's the same thing I immediately had to try as well :) The argument of -moz-element() can be a child of the styled element, but it can't be a parent (makes sense).
- jcarrano 3y agoYes it can- that's the first thing I tried- but it will not iterate forever. The trick is to use indirect recursion: <div id="a"></div> <div id="b"></div> #a, #b { height: 200px; width: 200px; border: dashed; } #a { background: -moz-element(#b) no-repeat; background-size: 80%; border-color: green; } #b { background: -moz-element(#a) no-repeat; background-size: 80%; border-color: purple; }
- sph 3y agoThis is utter madness. I love it.
- kevingadd 3y agoIt's impressive how well the minimap works for bigger articles, I clicked around randomly and ended up at https://www.stefanjudis.com/notes/should-responsive-images-work-with-container-queries/ https://www.stefanjudis.com/notes/should-responsive-images-w... and the minimap feels slightly magical since it appears instantly and updates synchronously if I do things like select text. It feels kind of disappointing that I can't interact with it to scroll around like in i.e. Sublime Text, but I imagine that's a little harder to do as the author of a website. It's still very cool to me that you can do something like this on the web, and I wonder how much work it would be to support this complex CSS feature in Chrome or Safari.
- taink 3y agoWeirdly enough I can't see it on this article but it's showing just fine on the OP. Maybe my extensions?
- stefanjudis 3y agoSite author here: there's some logic to only show the minimap when there's enough screen estate and it generally fits. Couldn't be bothered to scrolling/dragging logic. :D
- oneeyedpigeon 3y agoIt should definitely take a responsive design into account, I think. The beauty is that most sites, on desktop at least, should be able to benefit — we all have plenty of horizontal real-estate to spare!
- dmotz 3y agoA decade ago I built a silly JS library for folding up DOM elements like paper [1] and I eagerly anticipated using element() instead of tediously cloning nodes for every fold. Here we are ten years later and this niche CSS feature has yet to be adopted by the other browsers. Similarly, I thought I'd soon be using the CSS custom filter spec from the same era (which allows custom GLSL shaders to be applied to elements), but it also has yet to pick up traction. [1] https://oridomi.com https://oridomi.com
- danShumway 3y agoMy understanding was that browser makers looked at the CSS custom filter spec and decided they were too difficult to implement securely[0]. On one hand, I definitely appreciate that, I'm glad to see a feature abandoned if it's being abandoned because it's impossible to do it safely. On the other hand... I wanted CSS custom filters so much and I still regularly think of things I could have done with them :) [0]: https://lists.webkit.org/pipermail/webkit-dev/2014-January/026098.html https://lists.webkit.org/pipermail/webkit-dev/2014-January/0...
- autoexec 3y agoThere's already enough problems with CSS and what it can do that I want an add-on which either disables it entirely, or allows only a tiny subset of it. I can appreciate a clever use of CSS the same way I can with JS but for my day to day browsing I don't want either being able to do whatever it wants because far too often what websites use it for is user-hostile.
- danShumway 3y agoCSS shaders are the kind of feature that I would get a ton of use out of for specific projects, and would also very likely either turn off entirely or at least put behind a permission in my own personal browser. I get why they're likely a bad idea, I'm not saying they should be implemented. It's very likely the right decision to get rid of them. I just mean... I want them XD
- Hackbraten 3y agoWhat am I supposed to see here? I’m using Firefox on Linux. All I see is a normal blog article about something called a minimap, but I fail to see any such minimap. Disabling the ad blocker didn’t help. What am I missing?
- drewg123 3y agoLook in the upper right side. There is a mini snapshot of the page, with a blue outline showing the portion of the page that the browser can see. When you highlight text on the page, you can see it highlighted in the minimap.
- oblio 3y agoThere's a minimap-type scroll bar for the article to the right. There's an image in the article of how it looks.
- jacknews 3y agoNot working for me on macos. otoh firefox has been really weird since the 115 update - rock solid before that, but now all kinds of weird graphic glitches and hangs.
- taink 3y agoThere should be a picture of what you are supposed to see on the article[1]. It works on this page for me but some of the other articles do not show it. Seems weird because I'm not changing browsers in between. [1] https://images.ctfassets.net/f20lfrunubsq/2FuQMHycwersLjIf4dlI7A/cdee022a4a4cefea48c79c4027f5acc3/Screen_Shot_2021-10-17_at_21.45.35.png https://images.ctfassets.net/f20lfrunubsq/2FuQMHycwersLjIf4d...
- RandomWorker 3y agoThe first thing I do when I work in an editor with a mini-map is -- turn it off. I find it mostly the most useless feature for coding, and for sites it seems to be equally useless. Why? 1. Stuff is too small to really make out where I'm going or navigating. 2. Short or long pages, both don't really benefit from the loss of screen real-estate. Or the distraction really. 3. Other tools like a proper index with descriptive headers, or the search function work so much better to navigate the page. Where mini-maps could be awesome are large images, or maps. They tend to visual in nature, and when zoomed in you can look at the mini-map to see where you are in the whole. Which is useful. So, cool future, but this doesn't really seem like a great implementation.
- predmijat 3y agoYou can use `figlet` to create banners which are readable in the minimap.
- danShumway 3y agoI will say that I kind of love minimaps. I don't think that they should be required and I absolutely get why you'd want to turn them off, they take up a ton of space. If you're splitting files more often I could also see it getting really annoying. But I think of code very visually and spatially and I don't split files until I have to, so it does help me quickly navigate to be able to sort of see the "shape" of a file and to be able to quickly jump around in it, especially if the file is divided into clear sections. Mostly just personal preference, and I agree they should never be mandatory. And agreed on the large images/maps, most image editors have a viewport feature like that and it's pretty useful when doing detail work.
- dralley 3y ago>1. Stuff is too small to really make out where I'm going or navigating. It's for looking at the shape of the code, not the contents. Also VSCode for example will show errors visibly highlighted in red in the minimap as well, which makes them easier to navigate to.
- WorldMaker 3y ago
- danShumway 3y agoI can see the use, but this is also kind of wild. It's live-updating if you select text, it's almost literally a separate viewport into the same content. I'm trying to figure out the use-cases and implications of this. You can do offscreen/overflow:hidden tricks to make it work with hidden elements. But... as far as I know there's still no way without a library to convert that element to an image (for privacy reasons I suspect). I'm sorry for kind of being all over the place, but the MDN page is pretty short and I have a lot more questions. I guess I could always apply CSS filters and distortion directly to elements, does this being treated like a background open up possibilities there? It's the first time I'm hearing about this even though it's been around for a while, and I wouldn't have suspected this would be a CSS feature even on the table. How useful is this beyond just cloning viewports (assuming I'm only targeting Firefox and don't care about Chrome)?
- sakex 3y agoCould be used for a lot of cool things, like a mirror, a magnifying glass, keeping a part of the page in view even if it is outside of the screen (for editing purposes for instance), I'm sure I'm missing many other use cases. None of them fundamentally useful but cool in their own ways.
- danShumway 3y agoThe tricky bit here is that it's not going to do things like forward events, so using this to keep the page in view won't allow selecting text for example. For some things like the mimimap here, that seems like a feature? You want it to be purely visual in that case. For other cases, I'm not sure if I should think of that as a feature or a limitation. Definitely something to play around with though.
- sakex 3y agoYes but you could make a change at the top of the page that would have an impact at the bottom, and that would be useful to see both changes at the same time.
- lexicality 3y agoThe minimap is cute, but more entertaining to me is the screensaver that kicks in after 3 minutes of leaving the tab idle. I'm glad there's still whimsy on the web
- stefanjudis 3y agoHaha, glad that my screensaver sparks some joy. :)
- joshmarinacci 3y agoI’m pretty sure this remains unimplemented for security reasons. Other apis that would let you render part of the page to an image are similarly blocked. We ran into this a lot when working on WebXR.
- jessfyi 3y agoI always liked Lars Jung's implementation where the text is abstracted into blocks (which works on chrome) [0][1] and Rauno Freiberg's demo (uses -moz-element) where you can use it to pin sections, jump between them, and navigate the page in general [2]. [0] https://larsjung.de/pagemap/ https://larsjung.de/pagemap/ [1] https://larsjung.de/pagemap/latest/demo/text.html https://larsjung.de/pagemap/latest/demo/text.html [2] https://uiw.tf/minimap https://uiw.tf/minimap
- jchw 3y agoIt also doesn't show up on Fennec F-Droid, even in Desktop mode, but maybe that's just because I can't get the width to be big enough for it to trigger. Looks great on Librewolf! Of course, browsers will never be fully at parity with each-other until they're all based on Chrome, so it's no surprise there are the occasional features that are just easier to implement in one browser than the other... though this one just seems kind of wild, I'll be honest.
- TheRealPomax 3y agoLooks like that intro paragraph is going to need an update =)
- tiagod 3y agoWish this was an extension. I like it. Maybe it will be my next project.
- tiagod 3y agoHere's the adoption matrix for CSS element(): https://caniuse.com/css-element-function https://caniuse.com/css-element-function
- ryandrake 3y agoWhy have a "minimap" if your content itself is already the size of a minimap? I have a 27" monitor, and this site's content takes up a ~5 inch strip down the center of my browser, with 9 inches on each side full of whitespace. Over 75% of the page is whitespace. If you let the content grow to fill the browser window, you could read the whole thing without scrolling.
- iib 3y agoIs there any bookmarklet to add this to another arbitrary page? I can't seem to make it work, even with modifying the CSS code.
- masswerk 3y agoFor me on FF 115.0.2 (64-bit), the "how it looks like" pane was stuck, and only revealed on mouse-over what is instantly visible on Safari Desktop. On reload, the same state is still visible for a short period, before it's replaced by the intended content ("Screen_Shot_2021-10-17_at_21.45.35.png" – hey, built on FF/macOS!). This is also repeatable (and somewhat ironic.)
- throwthrow41 3y agoSo you can render a tree of elements into a background? I'm guessing you can't then get that raster image back out? I would love to be able to get my webpages as images.
- berkes 3y agoThat's slightly harder, but still possible by first rendering the HTML onto a canvas. Example here: http://html2canvas.hertzen.com/ http://html2canvas.hertzen.com/
- dec0dedab0de 3y agoI would be ok with it if we started seeing "works best with firefox" instead of chrome/edge.
- AbraKdabra 3y agoI mean, the article is good but no one is talking about that incredible screensaver. I opened like 10 links from HN and when I finally opened this tab there it was waiting for me.
- paddy_m 3y agoIt would be nice if the page defined what a minimap is?
- spankalee 3y agoelement() would be amazing for things like making thumbnails of slides in a presentation app.
- zackmorris 3y agoWow I had never heard of element()! Along similar lines, HyperCard had a lockScreen flag that would stop sending draw commands to the screen, and instead buffer them internally, so that the screen would update once drawing was finished. It's such a powerful abstraction that much of the hand-waving we do today to avoid redraw would just go away, including nearly all of the effort that goes into building single-page applications (SPAs), because their functionality can be simulated by simply locking the screen and fetching new HTML from the server as a dumb terminal so the loading bar doesn't animate: https://www.hypercard.center/HyperTalkReference/lockScreen https://www.hypercard.center/HyperTalkReference/lockScreen <rant> To a first-order approximation, all apps/libraries/frameworks are missing critical functionality like this. The most common design mistake is to provide a setter without a getter, or vice versa. Another one is for a console app to provide a config file setting, with no way to override that as a shell argument to the executable. There are dozens, if not hundreds of these common anti-patterns, so statistically the odds of any piece of software having any of one of them can be considered to be 100%. So in this case, most "modern" browsers provide a way to render the screen image from an HTML description, but no way to retrieve that image. The canvas element is a band-aid over these original design mistakes. A proper DOM implementation would look like iframes (windows) all the way down, where the contents could be specified from url, attributes, html, vectors/buffers or code. Each would have its own sandbox attributes defaulting to full isolation, so could be treated as its own browser, then their data dependencies could be piped together, a bit like unix executables. Mashups/portals/aggregators would be so easy to build that kids would be doing it. It's a serious enough problem that honestly I don't really think in terms of HTML/CSS/Javascript anymore. I work in tables mentally, then let the designers transpile that description to CSS. And the real work of building the rich interactions available in desktop programming simply can't be done without massive yak shaving. This was also a problem in OpenGL before better access to render buffers and shaders went mainstream. IMHO this all started when Netscape became a private enterprise from its Mosaic roots, then was exacerbated when Microsoft monopolized the browser market for so many years, then cemented when Firefox and Chrome endorsed the status quo. The only way out now would probably be to formally build a programmer's browser from scratch with hard security constraints around the core element's external communication, then emulate the current HTML/CSS/Javascript experience we're used to. Sort of like Qt, Postscript, etc. Which of course will never happen, so it's hard to see the positive in discussing these foundational decisions when there's nothing any of us can do to fix them in any reasonable amount of time/money/effort.
- cal85 3y agoCrazy that `element()` has been fully supported (with `-moz-`) in Firefox since 2011 while no other browsers seem to even partially support it [0]. I can think of a few powerful use cases (not just minimaps) if this had cross browser support. Does anyone connected to the Chrome or Webkit teams have any idea why? Is there a lack of interest, is it hard to implement with good performance, does it create any tricky security issues? [0] https://caniuse.com/css-element-function https://caniuse.com/css-element-function
- judah 3y agoChromium-based browsers have -webkit-box-reflect [0], which does some of the things that element() does. Specifically, it does reflections of elements. That's really the big use case for -moz-element IMO. [0]: https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-box-reflect https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-box...
- zeta0134 3y agoAnd since it is positioned and looks like the Sublime Text minimap, I instinctively tried to click on it to scroll to part of the page, and was saddened that this does not work. That would be the most logical extension, that feature is really cool in general.
- throwawaymobule 3y agoSame. a shame too, because scrollTo seems to be supported in every browser. IIRC, it's pretty finicky to get it lined up exactly. Maybe less-so with coordinates rather than elements.
- aendruk 3y agoIn case anyone else had trouble finding it, the minimap is only displayed if the viewport width was ≥1120px when the page was initially loaded.
- CursedUrn 3y agoThis seems like something that would be heavily abused by sites that deliberately try to break basic browser functionality (like being able to right click images, or select text). If they render the whole page as a background image, you'll no longer be able to inspect, save, translate, etc. any of the content. That's just the first thing I thought of, I imagine there's all sorts of nefarious ways to screw over the reader with this function.
- cal85 3y agoI agree it feels like something that could be abused, but not with the example you've given. It already only takes a tiny bit of CSS or JS to do those things you mentioned; no need to do anything complex with element canvases. So the reason that most websites don't do those things cannot be that they don't have the ability. It is because they do not, in fact, have the inclination, and that's because there is an economic punishment for having a shitty website: people will start using your competitors instead. (Caveat: this doesn't work out in areas that aren't free markets, like company intranet portals, badly run local council sites etc, which is why those kinds of sites tend to have more user-hostile stuff.) In general it is a mistake to think that we need to purposefully hamstring website operators to make the standard of websites higher: the opposite is true.
- cubefox 3y agoRelated: https://news.ycombinator.com/item?id=36749766 https://news.ycombinator.com/item?id=36749766
- dark__paladin 3y agoFor what it's worth, Vivaldi has the option to generate minimaps for whatever page you're on: https://help.vivaldi.com/android/android-appearance/page-actions-on-android/ https://help.vivaldi.com/android/android-appearance/page-act...
- keithxm23 3y agoIt would be super cool if this was implemented as a firefox plugin!
- mcbutterbunz 3y agoWould be interesting to see how this worked on infinite scroll sites.
- gymbeaux 3y agoFirefox has always been the browser that supports the cool stuff. I remember messing around with auto-enabling dark mode for my websites based on the reading of the ambient light sensor of my MacBook. Of course now our OSes decide when an app or website should use dark mode.
- throwawaymobule 3y agoI wish more sites exposed all of their themes as different stylesheets. I remember learning about the 'View>Page Style' option before darkmode was even a trend, and was unsurprised it was built into the browser.
- nektro 3y agoI have never found this style of minimap useful and I turn it off in all my apps