Im creating an web application in Angular 5 that should work fine also on mobile devices. The progress bar of it is an svg image, created in Adobe Illustrator and exported to svg. I have made it work fine on Android, Mac and Windows (all browsers) but Im having a problem with clip-path being rendered on Chrome or Safari browser that runs on IPhone IOS.
I have tried managing it by normal
clip-path: url(#clip-path);
and also by webkit specific:
-webkit-clip-path: url(#clip-path);
But insted of something like that:
Image preview:
I get this on Safari or Chrome on IOS:
Wrong image preview:
So it looks like clipping is completely ignored, but weird thing is that on Mac it works fine.
Please suggest how to solve it, as Im struggling with it for few days.
I have also created demo on
Stackblitz
Related
I started porting my iOS app (which works on iPhone and iPad) over to Mac via the Catalyst route but WKWebView is behaving very strange. All the content is too small, it looks like it thinks the monitor is 2 times bigger.
The website I am displaying is responsive and works correctly on iOS devices as well as a Mac in Safari. On iOS it looks the same in Safari and WKWebView but with Catalyst and Mac Safari, the Catalyst version is much smaller.
I also tried this with Google.com and the issue is the same.
Anyone knows what might be happening? Since this doesnt happen just to the single site, I guess the issue is with WKWebView?
Are you using the Mac or iPad idiom for your Catalyst app? The “iPad” idiom, which is the default (and only option for apps that support Catalina), will downscale your entire app to 77% it’s original size. Read more here: https://developer.apple.com/documentation/uikit/mac_catalyst/choosing_a_user_interface_idiom_for_your_mac_app
My guess is that your app is being downscaled, including the web content. You could fix that by switching to the Mac idiom. If that’s not an option for whatever reason, maybe you could try scaling the web content back up with CSS?
I am working on a project that required SVG Animations. The SVGs work fine on my Android app, but it does not animate on iOS. I Googled and figured out that offset-path is not supported by Safari and Chrome on iOS. What should I replace the tag with, so it animates like it does on Android?
Here's the link https://caniuse.com/#search=offset-path
I have an app that is built with PhoneGap. One page in the app copies the contents of other page's canvases as images. This worked fine on older versions of iOS, but recently I noticed that the copied canvases are sometime blank. The rest of the page is rendered correctly. I don't know which iOS version it crept in, but I'm currently running iOS 10.3.1 on my iPad Pro. This does not happen when the same code is running as a WebApp in mobile Safari (or Chrome, or on my Mac laptop browsers).
Using the debugger on the App, I can restore the page by simply toggling the display property. This indicates to me that it's a rendering bug in the built-in Webview that Cordova uses. I currently have a patch that toggles the display property. This works, but it causes flickering even with requestAnimationFrame() or SetTimeout(fn, 0).
The app is built with cli-6.5.0 using PhoneGap Build.
Has anyone else seen this bug or have a better patch?
Follow up:
Toggling visibility fixes the flickering. When the problem occurs the canvas behaves like it's not visible, but the DOM reports that it is. Also the problem seems to occur when the canvas is copied under an Ajax callback. Delaying the processing with setTimeout() does not solve the problem.
I have an HTML animation created using Adobe Edge Animate that plays fine in my desktop browser version of Safari (9.0.1)
It doesn't work on the iPad platform it is targeted at, and it transpires that some of the image names in the assets folder are not capitalised. The HTML is calling for 'pasted.svg' for example and the file is called 'Pasted.svg'
OS Safari seems to be using some kind of fuzzy logic to be kind to the developer and is working out which image to use. iOS is not, which doesnt help me bugtest.
Is there a way I can duplicate this behaviour on OS Safari so I dont need to keep loading up to the iPad to test if the animations will work?
Thanks
I'm using jquery mobile & phonegap to create an app.
jqm version 1.3.1, currently in testing my app with an android device
i'v created a simple popup (code taken from jqm web site)
and the popup shows correctly on my pc (page gets opacity) but on the android device the popup is shown different,
the background page looks like it has a black background, but when i scroll (yes i can scroll when the popup is still opend) some of the background looks ok with an opacity, similar to how it looks on my pc.
Any ideas on what is the reason?
10x
I had the same issue for android sdk 17 (not for older versions which I tested).
Even though this answer might be to late for this questioner, it may help someone else.
My solution:
In your android manifest, switch android:anyDensity="true" to
android:anyDensity="false"
Regards, miweiss