Style broken and pixelated in a bootstrap modal using google chrome? - css

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.

Related

TinyMCE(v5.92): behave differently in firefox(v91) vs chrome (v93)

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?

font-awesome with asp.net mvc and ie11/Safari only SOME icons don't work

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.

CSS hover suddenly works on mobile browsers?

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

Opera Mobile not showing jQuery Mobile icons

I have a problem in Opera Mobile browser which is failing to display jQuery dialog icons. This is how this looks like:
As you can see, icon left from error, which should be close button (x) is missing, as well as the icon in the "OK" button. Also, "Automatic" button in the background (lower right part of the screenshot) also lacks its icon.
Any idea what might be the problem, having in mind that this is only happening with Opera?
I also have issues with Opera Mobile not rendering Jquery Mobile elements -
try this to test...
Call Now - 02258 588 528
this should show the gear - if that doesnt work then i would say you have issues with CSS and the image mapping. To resolve that you should get fresh CSS from the Jquery Mobile download pack
I found the solution. When I was downloading jQuery Mobile files, I thought I only needed js and css files, but it turned out that there is a folder named "Images" which contains all jQuery Mobile icons :)
To conclude, don't download only js and css files, download and deploy the whole zip file!

Google Chrome rendering its own styles

I'm changing over a site from HTML to Wordpress (for the first time, so be gentle!) and I ran into an issue with Google Chrome applying styles that I've never knew existed! In this case I'm referencing the style that positions the bg.gif image background. In both IE9 and Firefox the background elements seem to work just fine, but in Google Chrome I'm having the issue.
If you go to this site: http://www.richmindonline.com/doggy2/ then right-click the upper right corner of the page in Google Chrome, then click "Inspect Element", you will notice styles that are being applied that have nothing to do with my stylesheets.
Could someone provide some guidance as to how to fix this. I've already tried adding my own styles to trump the Chrome styles, but it's not working.
Which styles are you trying to override? What you're seeing are browser defaults - all browsers have them whether they show you or not.
What I'm seeing in the inspector is Chrome identifying the text direction and locale. Are you using a CSS reset?
http://www.cssreset.com/
Should go a long way in starting all browsers at the same default.

Resources