I'm using a UIWebView in my application to show some information to the user. Everything works fine when rotating the Simulator: the objects are resizing just fine, as I would expect.
The only problem is the UIWebView that, although it seems to resize correctly (the frame, in fact, does resize well), keeps shrinking its content by 1px at each rotation.
The more I rotate the device, the more a black column grows at the right side of the UIWebView.
Fixes that I've tried and that haven't worked:
calling setScalesPageToFit: YES on the UIWebView;
setting the viewport meta tag;
setting the content mode of the UIWebView;
calling [myWebView reload];
reloading the HTML after setting UIWebView's frame size
This is not a severe problem for me, but it's rather annoying. Can you help me, please?
Thanks in advance.
Luca
Related
I want to make a splash screen that appears when i open the app and disappears after 3 seconds, with the image being shared with the next activity.
On smaller screens(for example Pixel 2) the animation works without problems, but when i try it on my OnePlus 6 or Pixel 3 XL, the image always clips to like 50dp below it's position right before the transition.
What could be the problem?
For anyone having the same problem.
The issue was that i was setting a color on the splash screen's frame background. If i didn't set any color, it would work fine.
I found a way around it by adding a view that expanded the whole screen and setting the color to the view instead.
I hope this will help someone eventually.
I am seeing a strange issue in Safari 10 that may be present in earlier versions. When SVG content is present in the document along with a content editable div the text is disappearing. This happens mostly when selecting text, but also while toggling the display property of the svg content. Here are a few videos showing the behavior: http://www.screencast.com/t/CeyFqYyfeFZW
http://www.screencast.com/t/eRAGsopA
I can't make the application available publicly. We have a pretty complex document composition layer which is probably to blame. I'll try posting an isolated test later. I have only observed this issue on Mac OS X Yosemite (10.10.05). iOS seems to be fine. If anyone has seen this issue before please let me know. Thanks!
After a bunch of tests I figured out that in this particular example the problem is caused by the situation when editable text has higher z-index than image (raster or svg). Image can be placed anywhere, but not geometrically below the text. This issue also is specific to Safari 10+. Testing the original example in 9.1 everything works.
I have created a simple example testing z-index https://jsfiddle.net/xngmocxm/9/
There is a background element, which is jpeg, it has z-index = 0, 2 svg path elements (grey and red), 2 editable text elements and svg image (HomeSmart in the top left corner).
Z-index of the left text element is set to 30, right one has z-index 20, svg image z-index is set to 25, i.e. in between 2 text elements. In test browser I can see that in this case only the left text disappears, right one is shown and selected just fine.
So the svg that is above the text does not manifest the issue, but if the SVG is below the editable text this issue occurs.
If image content is jpeg, it also causes same issue:
img src https://jsfiddle.net/xngmocxm/12/
Anyway I was able to fix this by setting overflow to hidden on image wrapper of the problematic image element. I think this a is Safari bug and not intentional behavior.
Does anyone know if there is a workaround for this? Internet Explorer 10 and Window phone 8 are not able to correctly scale background SVG images when a user zooms. Looks like IE rasterizes the SVG on load.
Here is an example: The first image is the SVG as a background image. Zoom in on a MS Surface or Windows 8 phone and you'll see it blurs horribly.
The second image is the same SVG as an img tag. Zoom this on a Surface or Windows 8 mobile phone and it scales as you would expect (nice and clean).
Is there any property that can be added to make IE10 behave? Or is it merely a case of waiting for the folks at Redmond to fix it?
The problem is that IE, and other browsers such as Firefox rasterise the SVG before displaying it, so it will become blocky when zoomed.
The easiest way to fix this is to make the SVG file larger than is needed. For example double the size, or more if the user is likely to zoom in further. You can then resize the SVG image with CSS to display it at the correct size. This way the image will be naturally larger, so wont become blocky, unless you zoom in even further. At default zoom level the image is scaled down rather than up, which browsers usually handle better.
Edit: You can find further info on this issue under the “SVG and CSS Backgrounds” heading at http://dbushell.com/2012/03/11/svg-all-fun-and-games/
This is my second question, and I’m hoping to resolve an issue that I haven’t found addressed, though I did search for an answer.
Links and screenshots to problem are below. Using Fireworks CS5, I have created an animated gif consisting of 3 states that loops 3 times. It is built on layers, with the 3 states sharing only a background border. They do not share the background (the background is grouped layer consisting of a red box with a clipping path of white, which seems to work in the first two states, but fails in the third state) itself, or any other element.
It is a tile ad for an html e-newsletter, and it works on some clients (gmail, for instance), but the final state does not render properly in other clients (mac mail, for instance). To add to the issue, the same file was rendering correctly in Mac Mail earlier. The gif works if I open it in a browser (usually), as well.
I thought that animated gifs were very stable across platforms except for problems with looping in Outlook 2007 and I've never had this issue before (granted my experience is limited). Has anyone else had this experience? Does anyone have advice on this issue?
Many thanks,
Andrew.
Link to the good. This is the animated gif file. It may not work in all browsers (I did test the file thoroughly, but the weird issue just seems completely sporadic), but renders correctly in latest Firefox for Mac OS 10.7x.
Link to the bad. The third state is see-through, the background layer is not rendering.
Turn Off the Alpha Transparency in the optimization panel. After carefully examining each state, I realized that I had Alpha Transparency turned ON in the export. Even though each state had a solid red back ground, and even though the other states correctly rendered the solid red background, the Alpha Transparency was messing up the last state of the animation. To correct it, I simply turned OFF the Alpha Transparency. I don't know why I didn't think about that as the solution before. I hope this answer helps someone!
I'm using raphaeljs to create an app allowing people to customize doors. I'm basically separating the sections of the door and using raphaeljs to draw them via a path, then filling this path with the corresponding image.
This is my code that draws the door.
function drawDoor(style, color){
door = paper.path(door_paths[style].path).translate(105, 93);
door.attr({ fill: "url(images/door/"+style+"/"+style+"_"+color+".png)", stroke: 0 });
door.node.setAttribute("class","door");
door.click(element_click);
}
This works great in all browsers except Safari. It seems to draw the path fine, but when you scroll the page the image scrolls as though it is fixed to the background, the path act as a mask.
I've recorded a short video to demonstrate this, you can see it on vimeo here http://vimeo.com/24539065
This happens with both pngs and jpg, and I have tried removing my translate from the draw function but no luck. I have also ruled out css issues by removing my stylesheet.
Any suggestions would be appreciated, thanks.