I have a web app which looks as expected on all devices/browsers except on Safari on iOS.
Below is the expected, full screen view, where it shouldn't be possible to scroll in y-direction.
As said, this works fine everywhere, except in Safari on iOS where I can scroll in y-direction about 50% of the viewport height:
I've inspecting all elements in the inspector and can find nothing that explains this behavior, seems almost like it's something outside of the rendering tree, like some iOS feature, that causes it since even inspecting the root html element (like below) just highlights the expected part of the view (the part highlighted in blue in the picture at the bottom).
If anyone has has seen this issue and knows a possible cause, pls let me know.
I am experiencing an issue in Chrome browser on Android operating systems, there are some bars that appear when the video is played in full screen mode on landscape. The bars are present on this video: https://www.w3schools.com/html/html5_video.asp and you may see a screenshot taken from a Samsung Galaxy S9 below.
Are these bars meant to be there? What is their purpose / what do they symbolize if so?
it is a (new) control that reacts to a tap/swipe to show the main Android navigation UI even when in full-screen (disappears along with the rest of the controls)
It appears via the shadow dom as video::-internal-media-controls-display-cutout-fullscreen-button in an element <input type="button" pseudo="-internal-media-controls-display-cutout-fullscreen-button" style=""> but it appears (similar to some other shadow dom elements) resistant to styling at the moment.
It's for those who have a notch. You have to tap it, and it will shift the video, so the notch won't disturb you when watching the video.
In a recent update of Chrome, the "Inspect" window (chrome://inspect/) has a preview window (which shows the web page in an on-screen mobile frame).
How do I close it? The closest thing I have managed so far is to reduce the width so it does not take up as much screen real-estate.
Image example:
You can toggle the screencast using the button highlighted below:
If I am limited to say a 1920 x 1080 screen, how do I create media queries for a larger screen size without being able to test it?
You can set any resolution in Chrome. Just click "Toggle device mode" in Inspector and set any resolution.
In Chrome Developer Tools, you can use Device Mode to emulate any resolution, not just mobile breakpoints.
If you are using Google Chrome, you can open the web inspector Ctrl-Shift-I, then toggle Device Mode using Ctrl-Shift-M. It's mainly used for smaller devices, but you should be able to select 'Responsive' in the menu that comes up at the top of the screen, and enter any resolution you wish, along with a zoom level so that you can view it on your screen, albeit scaled.
If you are using Safari, you can do this relatively easily.
If you aren't using Safari, you probably should get it, at least for website testing. As you can see on step 6, Safari has LOTS of VERY helpful dev tools (i.e. disable JS, disable CSS, etc.).
Here is some instructions with pictures!
Go to the Safari menu (in upper left hand corner).
On that menu click Preferences, this should open up a pop-up box.
On the pop-up box, click the Advanced tab.
At the very bottom of that tab you should see a checkbox that says Show Develop menu in menu bar, check that box.
Now load your website in Safari.
When your website has loaded (for this example I'm using SO), click on the Develop dropdown menu.
Click Enter Responsive Design Mode, and that will now show your website in a window smaller than your browser window.
In that window, click on the window looking thing on the far left.
There are little gray bars on all sides of that smaller window, if you drag these you can make the size whatever you want.
As a side note, when you drag the gray bars (as shown in step 9), you should see the width and height resolution (pixels) change (see screenshot below), this is VERY helpful (and I use it all the time), as it will tell you the exact resolution (pixels) when your website breaks. P.S. you can go to ANY screen resolution - big and small - that you want to with this tool, which is really cool! (I've done 2500 x 1500, 100 x 100, etc.)
Hope this helps you!
I have a portfolio site here: www.mrliger.com. When I open the site in any browser apart from Safari and resize the browser window, the menu at the top of the page changes styles as desired. However when I resize the browser window in Safari, the header restylesto how I desire but when enlarging the window again to full size the header becomes stacked... Have no idea what is causing this. Could someone please take a look and advise?
Thanks