I have a strange issue with jQuery mobile. I am using the latest version (1.1.1), though I also had this issue with 1.1.0 .
The issue being that my icons sometimes do not appear, as in, the image itself does not appear. I test this in chrome. I am not able to reproduce it on purpose, it is a problem which seems to occur randomly. When it does occur, it looks like the top header in the image below. However, when I open the element inspector in chrome and uncheck/check the background (or indeed any) property, the icon magically appears. Does anyone have any clue what is going on?
An image to illustrate the problem:
Edit: to clarify, my associate has had the problem as well. This happened in chrome, but on a different computer, so I doubt any nasty plug-in or so is playing evil here.
Edit2: a couple of things I have tried to resolve this problem.
preloading through javascript: implementing a line of code to make sure the background is downloaded.
statically adding a to the page to see if the controls are downloaded.
The strange thing is that nearly everything is drawn, apart from the background-image. This occurs for all the icons by the way, so the ones in listviews etc as well. Navigating through pages or reloading does not matter.
actually your app is not able to locate the jQM's CSS so I would recommend to use the CDN's for getting your css.
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
Hope it helps.
Related
I don't really know how to phrase my problem. My page is working fine and all, responsive included (resizing my PC browser). But when I open the page from a browser in an actual phone, the blue section with icons gets all messed up.
There's apparently nothing wrong with it on the code. The thing that is driving me mad is, and as soon as I change anything from the inspector, it corrects itself (but that's something my users aren't going to do). It doesn't matter whether I change the color of a random text or anything, it reacts correcting itself whenever I make a change in the CSS on the inspector.
Can anyone help me figure this out? I'm attaching a screenshot from my phone before and after changing CSS on the inspector:
In which mobile did you try to show it?
I don't know if you solved it but i try to see your website from my smartphone and i show it correctly.
I am trying to replicate my Fiddle I have here on the website I am working on, but seems with the WidgetKit for Joomla the coding or CSS is effecting it. Fiddle is here: [http://jsfiddle.net/vZNj7/44/]
<div class="brand-wrap-bg">
<div class="image-cropper-brand" style="background-image: url('http://www.kanzenint.com/nkliq.com.au/nkliqjoom3/images/untitled-1_03.jpg');"> </div>
<div class="brand-text">This is where the overview text is going to be</div>
</div>
This is my template so far: http://www.kanzenint.com/nkliq.com.au/nkliqjoom3/index.php/k2-users/k2-extra-fields/k2-extra-field-groups/k2-media-manager/k2-information/brand-story
You wont be able to see the DIV, but its under the top menu DIV at the moment (purposely as I want the background under the header)).
I also want to make it so that the browser window will crop the bottom if the window is resized or for people who have different window sizes.
I have been trying to work out why I cannot get it to work. Close to 5am and nesrly given up :(. Thanks a lot for any help.
I have worked it out after getting onto a Win8.1 machine and using the devtools on IE11 since the previous versions are such a piece of crap and next to not usable.
I was using the 'initial' for position but seems that IE does not like 'initial' and doesnt recognise it? So I used 'Static' instead and seems to get it to work.
The reason I needed to revert back to it as Widgetkit was using inline styles that couldnt be removed (well they probably could but I couldnt see it in the template) so the inline styles needed to be basically reverted back to a default value.
Hopefully this helps someone even though no one helped me :(
Unfortunately I can't reproduce this in a JSFiddle or otherwise, when I do it simply works properly. From there I still was not able to narrow it down to figure out what is causing it. Here is the link to the development site:
http://dev.fusion-inc.net
This bug is only visible in Chrome, I am using the latest version, and the problem still appeared on the previous version (I just updated this morning).
Watch the links in the content of the home page carefully, when the image slider transitions, you will see a change in the text of the links. It's almost as if the anti-aliasing changes somehow and causes the text to become just a smidge thinner. You may need to zoom in to see it well.
Any idea what's causing this? I'm completely stumped, the only thing I can figure is something in the rendering of the animation of the slider is tweaking some anti-aliasing or something causing the fonts to move a bit. Even the youtube and linked in images in the footer have the same problem.
#content * {-webkit-backface-visibility: hidden;}
The above fixed it thanks to someone in Chat.
Similar problems should reference this link: Prevent flicker on webkit-transition of webkit-transform
This problem is only happening in Google Chrome on Mac OS X (Chrome 17). I've tested it on all the major browsers on Mac and Windows 7.
Here is the page in question:
http://dealsfortherich.com/drop/
As you can see, I'm loading divs via JQuery AJAX.
The page is always fine on "Refresh."
You can navigate pages with the left and right arrows. The problem happens when you change pages; especially when you change pages when scrolling the page quickly. Try scrolling the page down very fast and hit the right arrow.
The background images that were already loaded via CSS (for example):
.sort_block{ background: url(images/sort_block.png) no-repeat;}
start to disappear. Only background images that are loaded with CSS start disappearing. All are fine. If you open Developer Tools on Chrome inspect the elements, you will see that the browser has the correct syntax and it has already downloaded the image into its cache. For some reason, it's just failing to display it. The CSS display value is correct. In the Inspector, for the div with the missing background, if you modify a value such as "top: 8px;" to "top: 9px;" the image suddenly appears.
This is only happening in Chrome (v. 17) and Chrome Canary (v. 19) for Mac OS X (10.7.3).
Should I report this bug to Google or is there a known work around or fix? I guess I can replace the s with s but I would rather do it correctly and fix this weird issue.
I don't know if this is the same issue, but the root is probably the same: http://code.google.com/p/chromium/issues/detail?id=111218. Based on that report, I don't think there's a known fix yet.
I had the same problem and diagnosed it for hours, but it's not about your code, it's a memory related bug in latest chrome. In my experience it doesn't happen to small images, so a temporary solution would be to decrease the file size (to under 10kB or so).
I have a test file here, showing the difference between a big and a small background image.
http://kolina.fi/chrometest.html
We worked up a solution for this issue until Chromium/Chrome "fixes the glitch" (hi, Milton)...
My colleague, Andrew, posted our solution here:
http://blog.andrewcantino.com/blog/2012/02/15/fixing-the-chrome-background-refresh-bug/
You can see the page in question at:
http://www.mavenlink.com/tour
It sounds like this has worked for others as well, but it's ugly!
I've recently had this issue, and the fix was to use the complete url, rather than a relative path.
E.g. change url(images/image.png)
to
url("http://yoursite.com/images/image.png")
Use :url(.//images path. The .// should solve the problem.
I am having issues with a website that I am working on in which images and background-images fail to load in Internet Explorer 6.
Here is an example of a page on which you might experience this issue:
Example Page
So far I have looked at the following possible issues and pretty much ruled them out:
XML/Extraneous data in the image files (google photoshop 7 internet explorer)
Corrupt image files
I have not ruled out invalid markup.
I have noticed that there are validation errors in most of the pages where this problem has been reported and I am working on getting those fixed where appropriate.
The behavior I see is that the page will load and all elements other than the background image render. There are no javascript errors thrown. When using Fiddler, no request for the image is made. If the browser is pointed directly to the background-image, the cache is cleared and then the browser is pointed back at the HTML page, the background-image will load inside the HTML page.
Does anyone have any additional suggestions for ways to attack this issue?
Twice now I've had people have problems with photos not showing up, and it was because they were in an incorrect colorspace, using CMYK instead of RGB.
this is a weird issue with IE6. I just right click on the image and select "Show Picture" then the image loads properly.
I'm looking at this in IE6 and trying to replicate the problem, but I can't seem to get it to happen - it always seems to load.
Some thoughts on things to try though as there appears to be another two classes that the background is over-riding is to try adding !important after the background assignment, so:
div.gBodyContainer {
background-image:url(/etc/medialib/europe/about_infiniti/environment.Par.7366.Image.964.992.direct.jpg); !important
}
Another thing to try is getting rid of all the . in the filename and cut down the length of it, shouldn't matter, but it may be causing some problems, doesn't hurt to try it anyway.
The other thing you could try is making gBodyContainer an ID instead of a class, or give it an ID as well as a class and assign the background to the ID. Again, it shouldn't matter, but it doesn't hurt to try and see if it works, IE6 does a lot of funny things.
is it only ie6 and not ie7 too? IE is pretty strict with html sometimes, versus firefox lets you get away with more. Not sure if this helps, but I just debugged weird IE6/7 bugs by slowly taking away content. But if it's only intermittent, as in happens with the same code on and off, that's a really weird one.
The problem is the "IE6" part ;-)
I think in some cases you could solve this issue by loading the full size image before the request and hide it with style display: none; so IE6 will load the image from cache.