Html5 and css issues in android default browser. - css

https://api.backendless.com/09EAFE1D-5539-4B63-FF7E-D9D9379C5E00/v1/files/web/index.html
Why the icon "keyboard arrow down" on the first screen appears as "keyboard" in android default browser?
It suppose to be "keyboard arrow down" from https://www.google.com/design/icons/
Second screen, third slide, android default browser - canvas of mobile devices appears at the center instead of sides of slide.
4th screen, second slide, android default browser - blue button appears without text and icon.
4th screen 6th slide with header "Gesture support" - I have .ogg video on this slide. The problem is this video doesn't work in android default browser and google chrome for android. Why so?
What's wrong with this creepy android browser? How can i emulate it on my ubuntu pc to use developer tools?

Related

Broken mobile responsiveness in iOS only

I'm experiencing a weird issue with the mobile responsive layout of a website.
The address is https://melec.vercel.app/
On desktop using dev tools > responsive, it works correctly, also on any android device you get the correct mobile experience but in iOS devices (tested on 2 iphones) the website renders incorrectly, it seems to have the double of the actual available screen width.
For reference I'm using tailwindcss, tailwindui and nextjs.
In this image you can see the scroll bar for horizontal movement.
Here you can see how I can freely move horizontally, this doesn't happen on dev tools or android devices.
Also when I press the mobile burger the whole layout shrinks a bit.
it is because the top part "flex-shrink-0 flex items-center".
I entered a "max-width: 100%;".

Full screen in Safari

I am developing a H5 Canvas game using PIXI js.
I am struggling in implementing the ios Safari swipe up to full screen message.
Added a new div with window.width + 1000 px.
It does remove the safari address bars but i am not sure when to remove the div. i.e. i am not able to identify if i am in full mode or not.
Also, what should i do to get back the div enabled if someone accidentally or forcefully comes out of full screen mode?
I am open to use any opensource lib as well but wasn't able to find one except screenfull.js which doesn't supports safari mobile

On ios mobile device, embed youtube video (with iframe api) dont show the pause/play button overlay in the middle of the video while playing inline

this is a new behavior that started lately (last 2 months) in IOS mobile devices only. in android devices the pause/play button overlay still exists.
The behavior:
when embedding inline youtube video with controls=0, when the video plays, the only way to stop it is by clicking the middle of the video on the pause button overlay (except using an external button and the api off course). in desktop and android this works great but in IOS the pause button overlay in the middle of the video does not exists any more. this means that in order to give the user the ability to stop the video we must put controls=1 which is less convenient.
is this intended or a bug?
also, the property fs=0 (is to allow full screen) does not work on IOS.
Thanks

Does Chrome's mobile emulator have a height difference from the iPhone simulator?

I'm testing the layout of a PhoneGap app (using the Framework7 framework) in the Chrome mobile emulator (iPhone 6) and the Xcode iOS simulator. However I can't match the vertical layout across both simulators.
The Chrome emulator has a CSS resolution of 375x627, which (I assume) equates to 750x1254 with the device's pixel ratio being '2'.
What I can't understand is that even with a 20 CSS pixel space at the top of the screen for the status bar (40 device pixels), why does the Chrome mobile emulator still fall short of the iPhone 6's native 1334 pixel height?
The Chrome emulator's height seems to be (627x2)+(20x2)=1294... 40 pixels shorter? Am I reading the figures wrong, or is Chrome's iPhone 6 device profile incorrect?
The Chrome mobile emulator is for inspecting the html and css and it does not read any configuration.
In your config.xml you have a setting for the behavior of the statusbar:
<preference name="StatusBarOverlaysWebView" value="true">
If it is set to true, then your html body starts in the top of your screen and you have to add 20px padding to it, otherwise you have the statusbar in your content.
If it is set to false, then the body starts below the statusbar.

Embedded video on fullscreen is not on top of the site

Okay, this is a strange one. When the embedded video is clicked (on Chrome) to be seen on fullscreen, it's moved on the right because of the sidebar. On Firefox, it's as it should -the video is correctly stretched over the whole site. However, there is something that doesn't allow Chrome to do that.
Okay, I managed to find that this is connected with the animation-fill-mode. And I'm afraid that this is duplicate of HTML5 video won't maximize beyond container dimensions in native full screen mode

Resources