I'm using haxe and openfl to create an html5 application. I tested the app in multiple browsers and devices, all work fine except in Chrome on iOS 7 only. The images used are not appearing seemingly randomly. Every time I re load different images appear and others disappear with exception to a couple that are always there. Here is what I tried:
I tried setting the z-index on the canvas that is used for one of the missing images, as well as a bigger width and height.
I know that the images are being loaded, I used Charles to take a look. There are no errors in the console log and changing the time and place where the images are being added to the display list in haxe changes nothing.
I swapped out one of the images that are always there for an image that is never there and it still didn't load.
The file names had a couple dashes and spaces in them so I changed that as well with no effect.
It's a very strange problem that I can't seem to diagnose. nor can I really find anyone with a similar problem.
The main issue is the fact that I can't see what haxe is building that might be causing this issue.
This is hard to answer without code samples. My advise is to look at what's different about the pictures that stay versus the ones that don't, both in how you're coding and the pictures themselves. I've had problems with images displaying correctly on ios only to find the problem was embedded somewhere in the metadata of an image. Hope this helps.
Related
I have searched for a couple hours on this topic, to no avail. When I view my site on mobile via Safari, sometimes pieces of the background image are missing. For instance, everything will look great, but then there will be a chunk missing in the middle. Or, perhaps instead there will be a chunk missing from the bottom. It appears to be random. Then, if I turn the phone, the missing piece fills in and even if I turn it back to portrait mode, the piece has filled in.
Any ideas as to why a section of an image won’t load? Could it be that the image is too big? Just looking for some ideas to get started with. Unfortunately, I haven’t come across this problem in my searches. Thanks.
Images should not be missing chunks. If it is a JPEG image, there is the tiny possibility your image is being corrupted in transit. Is the image being created dynamically?
But the most likely cause is that you have some html element over the top of the image that is opaque - and preventing the underlying image from being displayed.
I work for a media company in Norway, and on rare occasion we see that an image will fail to render in its entirety. When this happens, we can refresh the page and the image will still only partially render. We have only ever seen this happen on Safari, and I have been able to reproduce it both on desktop (Safari 13.1.2) and mobile (iOS 14.4.1).
In the network tab, the image seems to have been fully delivered. The amount of bytes transferred is the expected amount. In fact, if we increment the height of the container by 1px, the image will suddenly appear in full, with no network activity occurring. In other words, the browser did receive the full image, it just is not showing.
Everything in the styling looks totally normal, but we still assumed this was somehow related to the CSS. However, we created a local override, and we were still able to reproduce with the following code:
<figure class="desktopi-45000 mobilei-45000 tableti-45000">
<picture>
<img itemprop="image" data-defer="view" sizes="(max-width: 640px) 640px,(max-width: 1024px) 1024px,1240px" title="- Du hører ikke hjemme her!" alt="- Du hører ikke hjemme her!" class="" srcset="https://www.dagbladet.no/images/73594916.jpg?imageId=73594916&x=15.742793791574&y=14.099216710183&cropw=72.431633407243&croph=57.57180156658&width=760&height=342&compression=70 640w,https://www.dagbladet.no/images/73594916.jpg?imageId=73594916&x=15.742793791574&y=14.099216710183&cropw=72.431633407243&croph=57.57180156658&width=900&height=405&compression=80 1024w,https://www.dagbladet.no/images/73594916.jpg?imageId=73594916&x=15.742793791574&y=14.099216710183&cropw=72.431633407243&croph=57.57180156658&width=980&height=441&compression=80 1240w" src="https://www.dagbladet.no/images/73594916.jpg?imageId=73594916&x=15.742793791574&y=14.099216710183&cropw=72.431633407243&croph=57.57180156658&width=380&height=171">
</picture>
</figure>
Here is an image comparison of what we see when the issue occurs. Note that it can take many, many tries before the bug occurs.
While trying to figure this out, we came across a similar question. However, the answers provided fail to elaborate on the root cause of the problem. One of the answers says to use decoding="sync", and that does seem to resolve the problem (at the very least, we cannot reproduce with that added). However, that is not a viable solution due to the performance impact it has. Given the other sites are not experiencing this problem and do not use decoding="sync", there is something else going on. The question, therefore, is why is this happening? What is causing this, and what can be done to resolve it?
When testing locally, this could seem to be fixed by adding either
decoding="async"
or
decoding="sync"
to the image-tag. For some reason, Safari and browsers running on Apple-products seem to struggle with automatically choosing the best suitable way of decoding images to render.
The most upvoted answer on the question you've come across does actually clarify it a bit. But for a bit more explanation, there the actual Mozilla WebDeveloper explanation here, and according to the second answer, iOS has a bit of a soft-limit when it comes to loading things in, and lower priority things (like something loaded asynchronously) are given less memory. By using decoding="sync" on an <img> tag you are specifying that it should be loaded synchronously, things loaded synchronously tend to be of a higher priority and therefore have a bit more memory to work with. You could opt to lower the resolution of the image in order to not have to rely on synchronous loading to allow a higher memory usage when loading the images in. As far as I can tell, this is, in fact, a known iOS/MacOS issue, but I cannot find any mention of work being made towards it. So synchronous loading or differing image sources (with different resolutions) or possibly even some modern implementation of iframe-style tech (like what's used on JSPs, or any kind of nesting like what can be found in Angular) can serve as ways to alieviate this issue, but it seems like something that Apple will have to solve in order for it to undoubtedly cause problems.
I may be wrong about this, since I am not an Apple Technician, but innate browser issues cannot be solved through Web Programming alone. I apologize for putting all this in an answer, but comments have a bit of a character limit and links count towards it.
in the developer tools, I noticed that if you change something in css, the picture is displayed completely...
it became a solution for me: after the picture was uploaded, using js I added css which will not affect the image on the page like (z-index) or what ever, but thanks to this, the picture began to be fully displayed
Is anyone encountering this problem, and have a solution? See the images bellow.
I'm using 50px and 100px #2x images, named for example: smiley.png and smiley#2x.png correspondingly. However, when I set them on a tab view controller (using the images.xcassets) resource to smiley, for example, they appear too large for the tab.
I have gone forth and added bar item image inset specifications of 5px to try and mitigate the problem. Now they appear reasonably sized. However when I run the app in the simulator the icons size up and down and sometimes disappear completley from the tab, and re-appear when I switch to another tab. They enlarge and contract when double tapping on them... this is very buggy behaviour.
I want to know if this is just the XCode 6.0.1 or iOS 8 issue, or something I'm doing wrong?
I am having exactly the same issue. I am glad I am not the only one. The icons scale randomly every time you press them and finally disappear into zero pixels. The workaround I found was to select the tab images from your Supporting Files folder. Works fine for me with a 120 x 120 image.
It must be a bug, I hope it will be fixed soon.
Edit: above solution does not work! It was a mere coincidence, when I added another ViewController with exactly the same settings, it messed up again.
What does work is the solution mentioned elsewhere in this thread by Victor S: use 30x30 and 60x60 images and put them in a new Image Set in Images.xcassets. Don't use images from your supporting files folder with image insets from the Inspector Menu - Xcode 6 is pretty messy up there and the weirdest things start to happen.
I solved this problem by making my #2x images be 60px square and my regular images be 30px square. I'm still a bit confused now if I'm reading Apple's image specifications wrong, ie, if #2x is 2x what they specify, or the regular images are what they specify / 2?!
After some changes to our site, we are seeing that when certain pages are loaded, the page quickly changes width. This occurs every time on webkit browsers Chrome and Safair, but only rarely on some other browsers.
I have not been able to produce the effect at all on Firefox on Windows, Firefox on Mac, nor IE9 and IE11. It seems to rarely occur on IE8 and IE10. I have not found a pattern yet that causes it to appear on IE8 and IE10.
To understand what might be causing this, it would be good to know if certain styling attributes take an initial value while the page is loading but them assume some other value by the time the page is fully loaded. This could explain what is happening.
I should add that this problem developed after some changes which "should" not have caused this issue. Basically having to do with adding URL rewriting to eliminate duplicate pages. Clearly some side effect is operative.
At the moment we only have the code on development servers, so it would not be that easy to actually see it right now, although that is the obvious first question from a responder. So at this point, the question is more "what generically causes pages to reformat under Webkit."
UPDATE: the problem seems to be traced to Google Translate. When I remove that from the page, the problem goes away. Put it back; problem comes back.
Oddly, it mostly impacts Chrome! IE10 and 11 are exempt, and with even earlier IE versions the problem is much less.
I can readily demonstrate the temporary widening of the page just by reloading the page.
I experimented with trying to put the div containing the translate div instead a container div and setting some attributes on that. So far I have not found something that mitigates the problem.
We have suppressed Google Translate recently because it started adding other junk to the bottom of the page. That other junk is gone but we will continue to suppress it due to this new jumpiness.
I believe there is some clever way to contain the issue, but have no more time for it.
I have confirmed that the issue is definitely caused by Google Translate being on the page.
I'm experiencing a strange PNG issue in my as3 flash project. I am loading a bunch of PNG's into flash which have gradient transparencies.
In early slides, these are displaying correctly, later on in the project, the gradient transparency is showing as a solid black background.
Is this a memory issue? I've been pretty hot about memory clean up. All the images are loaded in using exactly the same scripts, and I can swap the images around with the identical results. It just seems like after a while flash stops showing the transparency right.
Images of my problem can been seen below.
Working:
http://s331209305.websitehome.co.uk/board/working.jpg
and then after the first level has played:
broken:
broken.jpg (same url as above with broken.jpg at the end (apparently as I am a new user here I can't have more than one url in a post))
I've been search Google for literally hours but can't find anyone experiencing a similar issue.
Any advice very much appreciated.
T
Ok, I know this is an old post but I too searched for a long time on google and only found this reference to the problem I was having as well.
Anyways, long story short, I fixed my issue.
The problem was I had set the alpha way to high. I set it to 5 and it did something similar to yours. I had to make sure the alpha was always clamped between 0 and 1.
Hope that was your issue as well.
I'm curious if you are loading them on top of each other, and you start seeing buildup.
it's hard to tell what exactly is going on without seeing any code, but here are some ideas
make sure that the BitmapData has
alpha enabled (this is usually done
through the constructor)
if this is a
memory issue (though this doesn't
seem like it is) try using object
pools. the HYPE framework has one,
but there are others too.
Check how they are loaded. I use the casa lib for loading, which makes the handling of the images easier, I load pngs through it and haven't had any issues like this.
post a simplified version of the problem. I've solved a problem countless times where I tried to post the problem, but would simplify it to the bare essentials and end up seeing the cause.