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?
Related
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 found many resources on what to do if NONE of the font-awesome icons are working, but I have an issue where only SOME of the icons are missing, and only on IE and Safari.
It appears to be affecting all of the icons that have a "content" value of "\f20d" and above...
that is, if I select the class for icon "fa-meanpath" (which has a content value of \f20c) the icon is visible.
if I change it to "fa-buysellads" (which has a content value of \f20d) the icon does not show, nor does any icon with a value higher. The space is completely blank (not seeing the square icon or anything else, just blank).
values LOWER than f20c appear to work fine...
I checked the list of icons here: http://fontawesome.io/icons/
and those same icons DO work on that page in IE and safari, but on my site, only in IE and safari (including iphone), the icons with that value and above simply do not render.
what are some strategies I can use to troubleshoot this strange problem?
I had the same problem but with Firefox (on Linux Mint) when I upgraded from Font Awesome 4.2 to 4.5. What helped was clearing the Firefox cache. The problem didn't occur in Google Chrome.
This is really odd. I'm not complaining that something works, but it is very surprising ..
On my website I had the usual css :hover for the navigation to reveal sublinks. But on the mobile browsers this needed some js help to make it work (as you can see from those many posts about "css hover not working on mobile browsers")
I made a simple script to fix the hover problem. But today as I was rewriting the code, since I noticed that it was not fully working as intended, I removed the entire mobileDetect.js which was handling the mobile hover. And now it works, without any additional scripts.
I tested it with chrome and safari on my ipad and iphone. It works as intended... did I misse out a big mobile browser update or something?
I use Jquery from google, no framework and standard HTML5.
Here is the site : (easy-sailing.ch) "EVENTS" and "AUSBILDUNG" are the mentioned navigations with sublinks.
I am just wondering if this is some odd anomaly and therefor should put my script back in or just enjoy the good news? :S
as far as i remember it has always been working...
...it is just not needed because there's no cursor and hover happens usually when you click (touch in this case) and you'll leave the page before noticing hover.
on android i can observe it when i touch+slide up or down.
I have fixed this for me by removing :hover selectors/rules at runtime https://github.com/kof/remove-hover
After months of working correctly, the large version of the Facebook Like button has stopped displaying the number of "Likes". The compact version works correctly, but the big button hides the number. I am on a Mac, and the buggy behavior is consistent on Chrome, Firefox and Safari. You can see the big buttons NOT working on JoomlaDigger.com, and you can see all the small buttons working correctly on each article view.
After digging into the markup, the div with class "connect_widget_number_cloud" has element style "visibility:hidden". Very strange, since the markup does NOT show this CSS style, but Chrome CSS Inspector shows the element style.
This bug appeared on September 1st, 2011. Can anybody from Facebook comment on this?
It is also currently broken on Facebooks own page. And the bug has already been filed.