I have a fully-responsive website, but after the release of iPhone 11, I have tried visiting the site, but what I get is a blank navigation menu, on Chrome and Safari. On all other devices, the menu is displaying properly. On iPhone 11, the navigation items/links are completely blank. What might cause this problem?
The site is already tested on all other Android and Apple devices, the menu works properly.
Link to the website: https://cutting-hedge.com
Your problem is with mobmenu-content style and element positioning.
It could be fixed with removing either position: fixed attribute or overflow: auto. Then the menu becomes visible on iOS 13 browsers.
Related
With ios11, when a site is added to home screen which has the web-app enabled. The title bar overlaps the site content in certain cases.
To reproduce the issue -
Add any site which has web-app enabled to home screen
Open the added app from the home screen Change the orientation from portrait to landscape
Now from landscape to portrait again
Now you will notice that the title bar overlapping the site content.
I have raised an issue at bug reporter with apple but did not get any response
The meta tag for the title bar is default, which behaves properly until the above steps are done
This is happening with all the sites which have the ability to be added to the home screen and function as an app. Any suggested fixes? Thanks.
The issue is resolved in ios 11.3 beta version. Hopefully this stays when the actual release version is out.
I connected iPhone to mac and I enabled Web Inspector in iPhone advanced settings, able to see the page in mac safari but not able to inspect any element and its style in safari. I am not seeing the elements panel or style panel.
Could anyone help me to find those panels to debug the styles, which i applied to page elements which I am testing in iPhone. I am able to see those panels in debugging the desktop safari pages. see the screenshot
Thanks in advance for any help.
If that type of problem ever happens to you in 2021, download and use Safari Preview instead of the regular Safari 👍
I got the problem with the following config:
MacOS Big Sur 11.4
Iphone 10 iOS 14.6
Cheers!
Update July, 2021:
Yes, the other answer for using Safari Technology Preview is working for me too: https://developer.apple.com/safari/technology-preview/
Debugging was broken for me with Safari on Big Sur: Version 14.1.1 (16611.2.7.1.4)
Debugging was working for me with Safari Technology Preview on Big Sur: Release 128 (Safari 15.0)
This was incredibly frustrating for me too. It's the small sidebar icon on the far top right, with elements tab open.
Before:
After:
From web inspector select any html element. Now in device it will be highlighted with blue color. The top right corner having expand window to show style, Layers, Node tabs. Select Style and edit css. Refer link given in comment for complete details.
In Safari 11.1.2, when the 'Computed' tab is selected, you can get back up to the non-computed properties (the Style Attributes) level by clicking the arrow beside any of the computed properties. See, for example, the grey arrow next to the -webkit-border-horizontal-spacing property in my attached screenshot.
Well, This is a normal problem in Catalina and BigSur updates after Mojave. Or if you are upgrading your MacOS to the later versions. I hope we don't get in Monterey!
I recommend to download - Safari Technology Preview -
BigSur - Download
with whatever you have been using.
If you are facing it with other lower versions -
try from here
The Answer is , need to select the DOM Tree from the dropdown as in the screenshot.
I've looked into stackoverflow and it seems that position:fixed in an iframe for iOS mobile devices has been an issue in the past but have yet to have an answer.
Here's an example I created via jsbin: http://jsbin.com/pekeca/1/
In that example, there is a parent HTML page that uses iframe which contains another HTML page (child). Here are the things to note:
When the parent HTML is viewed on any device, the navigation bar in the child HTML stays fixed. This is the intended behavior.
However, when the parent HTML is viewed on an iPhone regardless of the browser, the navigation bar in the child HTML loses its fixed position. This is a bug that only happens in iPhones.
When the child HTML page is viewed directly (i.e., not inside an iframe) in an iPhone, the navigation bar stays in a fixed position and works fine.
Has anyone figured out a workaround for position:fixed in iPhones or iOS devices?
In Chrome and Safari on iOS it seems the issue here is not the fixed position, but with the height of the iframe. From another SO answer: "Starting in version 4.2.1 of Safari iOS, and still going as of 4.3.3, the entire content of an iFrame is forcibly shown."
These other posts might help you:
iframe on iOS (iPad) content cropping issue - https://stackoverflow.com/a/10816492/1359306
iFrame and Mobile Safari (iPad/iPhone) - https://stackoverflow.com/a/19667786/1359306
I have an app on the store which is built using Ratchet framework. It used to work fine, until iOS 8 was released. Now when I test it on iOS 8, title bars for modals won't appear. All the controls like Close, Back buttons on the bar work when I click, but the bar and the controls on it are not visible. This happens only on iOS 8, works fine on iOS 7 and older versions.
To reproduce this bug, please open this sample app http://goratchet.com/examples/app-android-notes in Safari on an iOS 8 device or simulator, and then click on New note button to open a modal.
I've noticed while debugging it in Safari's web inspector that if I move the bar <header>...</header> element of the modal to somewhere else and then bring it back to its original position, it appears. Or sometimes, changing its display property from block to none and then back to block works. Or sometimes if I scroll the page.
Any solution will be highly appreciated
Seems there is an issue with position: fixed in Safari as discussed in this SO question: Mobile safari position:fixed z-index glitch when scrolling
You can fix it by adding this rule to your CSS
header.bar.bar-nav {
-webkit-transform: translateZ(0);
}
You can track the issue on Ratchet's Github repository here - https://github.com/twbs/ratchet/issues/679
You should try position:sticky;. It's made to deal with position on Safari. fixed has been an issue with mobile devices for years. I thought it was fixed but iOs8 has weird behavior too...
http://updates.html5rocks.com/2012/08/Stick-your-landings-position-sticky-lands-in-WebKit
I've added a bottom toolbar using a ToolbarManager which shows in the 9800 and 9520(which have a similar screen size) simulator but not in the 9930 simulator. I haven't tested this on an actual 9930 and do not currently have a way to do so either, but this behavior is weird so far. I've used the standard code given on BB dev site:
bottomBar = new ToolbarManager();
bottomBar.add(new ToolbarButtonField(ImageFactory.createImage(Bitmap.getBitmapResource("a.png")), new StringProvider("Button 1"));
//------------------more buttons and other fields------------------------//
setToolbar(bottomBar);
What could be the reason why it isn't visible?
It is a known issue with Bold devices (e.g. 9900, 9930, 9790) that they don't have a toolbar even though ToolbarManager.isToolbarSupported() returns true.