I have a Joomla 3 site at http://www.getdripped.com/dev which I am building a mobile menu for. I have it working well on desktops, but when I try to view it on my iPhone the menu slides in but is invisible. I can still blindly tap and the links do work, but its completely invisible. What's even weirder, when I click the button again to close the menu, it suddenly shows up for a brief second before the drawer closes. I'm not sure what the problem is, can anyone help?
My iPhone is running iOS 8.2, and I previewed in Safari. When I preview in the iPhone Chrome app, everything works swimmingly. Very confused here...
Your issue is very similar to other issues seen in iOS 8. A variation of the -webkit-transform hack seems to solve this problem as well.
Adding -webkit-transform: translateZ(0); to the body.open selector seems to solve the issue.
body.open {
-webkit-transform: translateZ(0);
}
iOS 8 appears to have some layering issues which 3D transforms are able to counteract. This one appears to be related to the use of -webkit-overflow-scrolling: touch; as the OP discovered.
Add this to the list of weird bugs in iOS 8.
Related
I have a very strange problem that I can't solve.
I have an application being created with draggable divs.
Everything was working fine so far. But since a few hours, as soon as I drop a draggable div, most of the divs on my page disappear, even though they are not related to the element at all!
As soon as I resize my page, the divs reappear. It's as if it's a display bug. Moreover, this problem only happens on Chrome. No error message is displayed though.
Does anyone have any idea what this could be?
Thanks a lot.
Google is aware if this problem and they fixed it in Chrome version 107, which is currently in Beta status. I was facing the same issue so I installed the Beta version and confirmed it is resolved. You can download the beta here:
https://www.google.com/chrome/beta/
I would also mention that this problem started with Chrome version 106, which is the latest stable version as of today.
Until Chrome is fixed, I found this workaround which fixes the problem. Add this style to the draggable element:
background-position: 0;
transform: translate(0, 0);
The fix for this is coming out soon.
https://bugs.chromium.org/p/chromium/issues/detail?id=1370030
I use the Simple Utility Function from this Answer to detect if a element is in my viewport. If it is, an fade-in animation is started for my content.
It works fine on Windows, macOS, Android and every browser on iOS except for Safari. In Safari the content stays hidden and the animation only starts after I try to zoom out of my site. I tested this on iOS 10 and 11 Beta 5.
My solution to this problem would be detecting if the user uses Safari on iOS and don't animate my content. But i would like to fix this problem so that the animation works. Can anyone help me with this?
EDIT: I think the issue is caused by Semantic-ui.Tested it with plain html and javascript and it works. I try to fix it now.
I finnaly found a solution.
The issue was the sidebar from Semantic UI. I found a CSS snipped on the docs. I altered the code a little bit and added it to my css file.
html.ios {
overflow-x: hidden;
-webkit-overflow-scrolling: auto !important;
}
html.ios,
html.ios body {
height: initial !important;
}
Seems like -webkit-overflow-scrolling caused the problem. But i had to add the other lines of code too or else it stutters when i scroll.
Like this, everything works perfectly!
The site in question: americandream.org.es/en
I have been working on this bug for two days now. My main navbar has several clickable buttons with dropdown content. On Chrome for desktop (where I designed it) this works fine regardless of how you resize the window (responsively adapts to desktop, iPad, and mobile display modes), and the same is true with Firefox and Internet Explorer for desktop. The mobile version also works perfectly in Safari, Chrome, and Firefox on iPhone 5.
However, the dropdown content does not appear on click on the actual iPad in any browser I have tested (Firefox, Chrome, or Safari) and it does not appear in Safari for desktop, either. While the dropdown content displays in the Chrome browser for desktop, the debugger for Chrome does not display the dropdown content, either, but shows a box where the dropdown content should be displayed.
I can see in the Chrome debugger that the class .dropdown-content.show does activate and change from display: none to display: block on click, but it is just buried behind other page content. When I delete all other page content, I can see that the dropdown content is indeed toggling and displaying properly.
So I am deducing that the problem has something to do with how Safari and some browsers on iOS for iPad understand z-index? The navigation bar has a z-index: 9999, which .dropdown-content should inherit, but I know that there is more to z-index than that the biggest number always shows up on top.
But what exactly is wrong and how do I fix it? I have tried manually specifying opacity: 1 and z-index: 9999 for .dropdown-content, and I have tried adding the -webkit-transform: translate3d(0,0,0) hack described here and here to override iPad and force hardware acceleration, but maybe I am not implementing that hack correctly? Do I have the display settings set wrong in the navbar css? I am also confused as to how the exact same javascript and display settings work fine in every browser on iPhone but no browser on iPad.
Any insight is appreciated. I just started teaching myself web design about a month ago, so I'm sure it's a simple mistake, but I am lost.
Removing the overflow:hidden from ul.topnav will allow the dropdown to show
I'm stumped. I use Masonry on my Wordpress site, and it looks fine on all major browsers except for Safari.
Here is an article link, for example:
masonry article about apple watch on a wordpress site
On Safari the div items are all squashed up, and I have no idea why.
I've deactivated all plugins, made no difference
I've tried using position:absolute; inside the div item, but then the blocks overlapped
I've tried vertical-align:top; inside the div item, made no difference
Any help would be appreciate. Really stumped on this one...THANKS!
As #dcardoso mentioned, your item class with the backface-visibility style is causing the issue. It seems that adding a transform forces safari to correctly render the item.
-webkit-transform: translate3d(0,0,0);
This style: -webkit-backface-visibility: hidden; in your .item class is causing the issue in safari.
I have this really annoying issue with the form jumping up and down on inputting values. I am using Jquery mobile version 1.0.1 using phonegap and testing it out on android 2.3 (this issue is only on android and not on iphones -why!?) .
I noticed that if the page is not scrolled before focussing on input box, then there is no issue. But the moment I scroll the page, and click on text box to input value , all hell breaks loose. Can anyone please enlighten me what is going on! Thanks in advance
I solved my issue as follows:
The container div have following css:
-webkit-transition-property: -webkit-transform;
-webkit-transition-timing-function: cubic-bezier(0,0,0.25,1);
-webkit-transition-duration: 0;
-webkit-transform: translate3d(0, 0, 0);
Removing it solved my problem in android.
It seems android is buggy with advanced css3 styles.
Hope this information may help...