We're using a Lit web component that has embedded styles. We generate hash values for the styles (through a PostCSS plugin that is part of our Webpack build) and add them to the HTTP response header in the Content Security Policy header.
This approach works completely fine on nearly all browsers and devices: Chrome, Firefox, Safari on macOS, Safari on iOS all display the component.
However, on iPad Safari the same website doesn't load the component and I get lots of CSP violation errors. The versions of my iPhone and iPad are the same (15.6.1). Strangely enough, another component on the same page that also has a hash in the CSP works! It also only happens in our real application. My demo webserver displays the component on the iPad.
Is there any known difference in how iPads deal with CSP in comparison to iPhones or other browsers?
Related
Environment:
I made a web-app using cordova-phonegap supported with Angular
In my application there is an IFrame which is loading a WebGL Component Made with Unity3D
When I run the application on browser it works fine, loads the application and component perfectly on all browsers i.e., Safari, Chrome, Firefox, etc
When I package the application to Android- there also it works perfectly no issues in loading the application or locally packaged WebGL files by Android app.
But When I package the application for iOS - It gives an error that "WebAssembly not supported by your browser".
P.S.: For website the webgl component is hosted on server but for mobile we are attaching files locally.
Some forums suggested to try WKWebView but doing so makes the entire app fail to load.
The WKWebView is based on Safari and does not support by default WebGL2. https://caniuse.com/webgl2 but it should support WebGL1 https://caniuse.com/webgl
It seems like Unity supports WebGL 1 and WebGL 2. https://docs.unity3d.com/Manual/webgl-graphics.html So, try to build it with WebGL 1.
https://answers.unity.com/questions/1454045/how-to-make-webgl-export-work-in-all-browsers.html
If that works, you could build it to WebGL 1 for ios and with WebGL 2 for android.
But off course some things might not work very good in WebGL 1.
Image from the Unity forum about WebGL settings for Unity
I'm having an issue with using a bluetooth barcode scanner on my iPad running iOS 11.2. The key events are not propagating in the same order as my desktop. Windows and Mac OS do not have this issue. Has this happened to anyone else or does someone know why this is happening? I've tried Chrome, Safari, and Firefox on the iPad and they all share the same output, but the Dolphin browser works fine.
Desktop:
https://i.imgur.com/eLsREg6.png
iPad:
https://i.imgur.com/laCP4ma.png
3rd party browsers on iOS - like Chrome, Firefox and Dolphin - must use WKWebView or UIWebView for rendering webpages and I'm fairly certain the speed and order of events is determined by the rendering engine.
It's not surprising to me that Chrome and Firefox both behave the same as Safari, because all three use the newer WKWebView. My best guess is that Dolphin is still using UIWebView, which is why it behaves differently. If you'd like to confirm that WKWebView is to blame, see if it works in Firefox Focus which uses UIWebView.
Unfortunately, there is not much you - or the browsers - can do about it.
that's because an ipad is more slower than a Desktop you cannot compare two different architectures them. Ipad always be more slower than Desktop.
Are there any differences in Angular change detection between iOS mobile browsers (Safari, Chrome) and desktop/android Chrome?
I have just served my Angular application using http-server npm package (via webpack). On android device application works just fine. On Desktop as well.
But there are some problems on iOS web browsers. Data that are fetched asynchronously are not being displayed. ChangeDetectorRef nor NgZone don't change anything. Also, in several cases ?. operator does not work.
Is anyone aware of any common pitfalls with Angular on iOS?
I am developing a web app for iPad and testing it on Safari on Mac and Safari on iPad Simulator. Now there are some issues with CSS in iPad Simulator which work quite well in Safari on Mac.
Now my question is,
Is there a powerful debugging tool for Safari in iPad Simulator?
When running safari in an XCode device simulator, the desktop Safari (v6) Develop menu shows those devices. From there, you can fire up the developer tools (DOM browser etc.) for the mobile browser. This helped me debug an mobile safari css issue without hardware.
Note: As of iOS6 this is not the correct way of doing remote debugging, leaving this answer for historical reasons but you should look into remote inspection with Safari, here is a good article: http://jeffreysambells.com/2012/09/22/ios-safari-web-inspector
Have a look at this, (a bash script I wrote) https://gist.github.com/2241976. It will allow you to open the iPad simulator and run Webkit's remote inspector, which will look just like this.
iWebInspector is quite a powerful tool for the iOs simulator's Safari.
It uses the same inspector as Chrome and it works nicely (I've used it myself and found it really helpful).
From their website
iWebInspector is a free tool to debug, profile and inspect web
applications running on iOS Simulator (iPhone or iPad). You can check
resources, see and change HTML & CSS, use breakpoints on JavaScript
code, create charts and more just as if you were on Safari for
Desktop, Chrome or Firebug.
It works for any web in Safari -the web browser-, for a chrome-less
webapp (full-screen) and also for apps using UIWebView -including
PhoneGap applications-.
I need to check rendering of a large sum of HTML5 "widgets" that will be shown in an iPad WebKit. Which desktop browser gives me the most similar renering experience? My widgets mostly consist of SVGs positioned with CSS3 and some CSS masking.
Is it Safari on a Mac?
EDIT: The desktop OS is not a concern, I can pick whatever I want for this...
EDIT: What particularly interrests me is if desktop Safari is closer to iOS Safari than Chrome is. They are both based on WebKit, but I see a lot of tiny rendering differences between Chrome and iOS Safari.
How about mobile Safari on the iPad Simulator?
Unfortunately, the iPad Simulator is Mac-only. If you can't test on that, Apple recommends using Safari and changing your user agent string to the iPad's user agent string. You can find instructions from Apple here.
Try real Safari. It uses Webkit and since you're on windows, you can't download the iPad simulator.
On the desktop, anything that uses WebKit is going to give you a similar rendering experience especially with regards to more technical things like SVGs. Unfortunately, there are still browser-specific quirks that you won't be able to notice without actually testing it on either the simulator or a real device.