Im using MUI (latest version) on Firefox Ubuntu 109.0.1 and created the following component which is rendering a MUI paper with a stack and those children that render each a MUI Avatar with Typography (see the attached codesandbox: https://codesandbox.io/s/jolly-poitras-ycvkdt?file=/demo.tsx=).
The component is rendering on Google Chrome/Chromium on Ubuntu as intended and analogous to the output of the sandbox. The problem is when rendering this component in Firefox, the number typography (child of MUI Avatar) gets slightly misplaced and not centered correctly within the Avatar - see attached screenshot.
As it is working on latest chromium build, I suspect it might be a Firefox issue, so the browser has problems to display the typography centered within the Avatar. Or am I missing something out?
Related
I need to make a react component that will continually flip over, exposing a new image each time. I have done this in my project, and it all works wonderfully in chrome on the desktop.
The issue is, that I need this on safari(desktop/mobile) and chrome mobile also.
I have created a minimal demo on codesandbox, which can be found here
What should happen, is the card should flip up, and then back down ONLY rendering its respective side.
My belief is that backface-visibility is not supported/is very buggy on mobile.
How can I acheive this without an external libaray?
I have just upgraded my project with its dependencies to Angular 12. Among other dependencies, I also use the TinyMCE text editor npm package (not the TinyMCE Angular integration) as an inline editor and I have implemented a directive for it.
So far it works fine with Chrome. whenever I click/focus on textarea the TinyMCE editor pop-up on the top of the textarea as I expected but in Firefox it pop-up on top of the page which is not the right place. I'm very confused now why it appears properly in its own place in Chrome but not firefox? I'm expecting the same behavior as Chrome.
It would be very helpful if anyone helps me throughout the tricky bug?
I'm writing a website that uses a rich Material Design theme on top of Bootstrap 4. So far I have been able to make all the browser chrome match the site at least somewhat (Chrome's autofill indicator being the most difficult to date), but ever since I started developing in Firefox Quantum, I'm running into difficulties hiding the focus ring around input fields:
According to the MDN docs, I should be able to apply the outline: none property to input:focus or input:-moz-focusring, however none of these seem to work. I can see the property showing up in the style inspector, and Firefox doesn't show that it's being overridden by anything, but the focus ring still shows up.
I understand it's important to have indication of focus, however seeing as I already have my own clear indication of focus, I would prefer to hide the browser-provided one as it interferes with my styling.
Okay, so, I solved this while trying to reproduce it in JSFiddle (which I wouldn't have been able to do). It's ridiculous.
On my site, I'm compiling Bootstrap and Material Design from source along with my own SCSS so that I can override the colors and options for the two. It turns out that Material Design overrides the enable-shadows option for Bootstrap, but only if the SCSS is referenced for both, so it's impossible to reproduce in JSFiddle (where the SCSS has already been compiled to CSS).
The offending rule is in Bootstrap's mixins/_forms.scss file under form-control-focus. It's new in the latest minor version of Bootstrap, apparently, because I've tested in Chrome since updating and the rectangle shows up there, too (whereas it did not before updating Bootstrap). The rule won't show up in the inspector because opening the inspector unfocuses the control, and the :focus state doesn't trigger the JS event to let Bootstrap know it's focused, which led me to believe it was browser chrome highlighting the control.
I have an issue with the boostrap modals using the Inspinia theme. When i select a combobox or the tags input, the style of the modal brokes and gets pixelated. We didn't change any style file, somebody knows if it's a chrome issue?
here's a picture of the error
This is an open issue on the Bootstrap GitHub. Apparently, it is a bug in Chrome on Windows with GPU acceleration enabled. I guess we'll just have to wait until Chrome or Bootstrap release a fix.
I've created a very basic mdl page and I expect the drawer component to have a variable about of content, almost certainly greater than the height of the page, so it will need to be scrollable. Unfortunately, something about the mdl framework stops the mouse wheel from working on the drawer component. You can even see this in the provided samples such as http://www.getmdl.io/templates/android-dot-com/index.html
I've tried setting the z-index of the drawer div to 999 and other such hacks but it still doesn't seem to work. You can use the scroll bar but that's hardly ideal. It seems to work by default in firefox but not in chrome or IE. Has anyone else dealt with this issue before?
This problem will be fixed with 1.0.6.
Refere https://github.com/google/material-design-lite/pull/1652