Opera Mobile not showing jQuery Mobile icons - css

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!

Related

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

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.

Some Browsers do not load CSS and Layout of Components[Joomla]

The problem is that I have a responsive site, based on joomla framework. It works fine on all browser and all the custom components load easily but I have noticed that it has a problem on some mobile browsers (as: ASUS device, browser integrated on Facebook APP and more) to load a CSS of page, linked to mijoshop component. In fact this component work fine and loads CSS in some mobile browser but other show text and blank page.
For help and better understanding I have attached a video demo:
Video Link1
Video Link2
How can I fix? Thanks!!!
And for first thanks for support :)
The first idea came to my mind is that viewport in browser that doesn't load(or load but doesn't show, check in devtools responsive mode) css file differs from bottom value of pixels in media query. I mean than your design could be without base.css file, css rules work for example from 320px and some browsers have viewport value less than 320 px, so nothing is displayed.

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

jQuery Mobile + Phonegap Icons Moved

I am using jQuery Mobile + Phonegap, when I run the app on chrome all the buttons (lists, back, home) of jQuery work perfect.
When I put it on my Android device all the button icons seem to be moved like the css is wrong so they are either grambled (like half another icon is show instead) or they do not appear at all and the space is left blank.
Any suggestions?
I am using jQuery Mobile 1.0.1.
Thank you!

css - alternatives or hacks for mobile browsers that don't support "background-position"

I am trying to make my mobile site accessible to as many browsers as possible, and I noticed when using the opera mini simulator (http://www.opera.com/mobile/demo/) that it doesn't support css background position - which I'm using to display a sprite for all of my site images. Are there any workarounds for this?
There has to be something else that keeps your code from working, because Opera Mini 6 does actually support background position.
Th website of the company that I am working for uses background position in some places, for example to change the color of the active menu button, and that works just fine. On the other hand there is some other rendering problem that makes it only show part of the button, but that part is the right color...

Resources