I've developed a swiper (using the library of react swiper (http://kidjp85.github.io/react-id-swiper/) and unfortunately, the swiper is disappeared on the browsers of Safari and Chrome in iPhone devices - only iOS 12+. Just when i'm clicking on it, the swiper is shown.
You can see the problem when surfing this site through an iPhone device running ios 12 and above, the bug does not occur in iPhone devices running iOS below 12.
This is a demo site where you can see the bug. Surf from iPhone with iOS 12 to this site to see it.
http://qmerce.github.io/static-testing-site/articles/strip_stage/
Thank you
Use of translate3d pushes CSS animations into hardware acceleration:
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
on every swiper-slide element
Is there anyway to avoid Facebook opening a link in its own web browser or to show it on landscape mode? I've noticed it has portrait orientation locked and my app needs to be run over landscape, but it seems to not allow you to rotate the device.
Thanks in advance!
2021 here, and Facebook iOS browser still doesn't rotate with the device.
I am testing a web app by running selenium test scripts on an iPad simulator using Selenium iPhone driver. The app opens in UIWebView inside the simulator. However the top part of the app (title , toolbar etc.) gets hidden from view. I am able to see the top part when I drag down and hold the bottom part of the app.
1) How can I make UIWebView make the app visible fully? I guess it is because of the difference in iPad simulator version used in the iPhone driver source code and one that I am using to launch the app(iOS 6.0). However I have no idea how to proceed with this as but I'm not familiar enough with iOS development.
2) Is testing in UIWebview same as testing the app in mobile Safari? Is there any way I can test the app in mobile Safari in an iPad using Selenium?
as I understand, you want to test the website, not the iphone app.
Then you could just as easily open it in mobile safari and use bookmark to view full screen (if you wanted the app to go fullscreen, you would need to do it programmatically)
I updated the Ipad storyboard file located at src\resource. The webView setting Y coordinate was set to -84 and I changed it to 0. This might help
Unable to drag the spacetree in safari browser on IPhone simulator.
I tried below examples on my safari browser in IPhone Simulator.
http://thejit.org/static/v20/Jit/Examples/Spacetree/example1.html
http://thejit.org/static/v20/Jit/Examples/Spacetree/example2.html
http://thejit.org/static/v20/Jit/Examples/Spacetree/example3.html
Please help to perform drag on the hierarchy tree inside the safari browser on IPhone simulator.
I am using phonegap for my application to implement in IPhone but this hierarchy tree drag functionality itself not working in IPhone simulator browser since I can't run as mobile app.
Please help via code wise what I needs to change to run this code in Iphone!
There is no drag functionality, actually, it is just a click functionality. After some tests on the iPhone Safari browser I can report to you that it is working very well - spacing and animations are rendered perfectly.
I've built a web app that uses the HTML5 tag and JavaScript code that renders other content synchronized with the running video. It works great in desktop browsers: Firefox, Chrome, and Safari. On an iPhone or a DroidX, the native video player pops up and takes over the screen, thus obscuring the other dynamic content that I want to display simultaneously with the video.
Is there any way around this? If necessary, I'll figure out how to write native apps for both those platforms, but it would save me a ton of effort if I could just stick with HTML5/JavaScript.
In iOS 10+
Apple enabled the attribute playsinline in all browsers on iOS 10, so this works seamlessly:
<video src="file.mp4" playsinline>
In iOS 8 and iOS 9
Short answer: use iphone-inline-video, it enables inline playback and syncs the audio.
Long answer: You can work around this issue by simulating the playback by skimming the video instead of actually .play()'ing it.
There's a property that enables/disables in line media playback in the iOS web browser (if you were writing a native app, it would be the allowsInlineMediaPlayback property of a UIWebView). By default on iPhone this is set to NO, but on iPad it's set to YES.
Fortunately for you, you can also adjust this behaviour in HTML as follows:
<video id="myVideo" width="280" height="140" webkit-playsinline>
...that should hopefully sort it out for you. I don't know if it will work on your Android devices. It's a webkit property, so it might. Worth a go, anyway.
Old answer (applicable till 2016)
Here's an Apple developer link that explicitly says that -
on iPhone and iPod touch, which are small screen devices, "Video is NOT presented within the Web Page"
Safari Device-Specific Considerations
Your options:
The webkit-playsinline attribute works for HTML5 videos on iOS but only when you save the webpage to your home screen as a webapp - Not if opened a page in Safari
For a native app with a WebView (or a hybrid app with HTML, CSS, JS) the UIWebView allows to play the video inline, but only if you set the allowsInlineMediaPlayback property for the UIWebView class to true
In iOS 10 beta 4.The right code in HTML5 is
<video src="file.mp4" webkit-playsinline="true" playsinline="true">
webkit-playsinline is for iOS < 10, and playsinline is for iOS >= 10
See details via https://webkit.org/blog/6784/new-video-policies-for-ios/
According to this page
https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/Attributes.html
it is only available if (Enabled only in a UIWebView with the allowsInlineMediaPlayback property set to YES.) I understand in Mobile Safari this is YES on iPad and NO on iPhone and iPod Touch.
I don't know about android, but Safari on the iPhone or iPod touch will play all videos full screen because of the small screen size. On the iPad it will play the video on the page but allow the user to make it full screen.