I have a funny issue that I have spent hours on. It looks like it has something to do with IOS Webkit since it only happens on IOS (Firefox, Chrome), but never on Android or Windows (also Firefox, Chrome). Because it only happens on a mobile phone it is difficult to debug.
I have a very specific div that does not render, but only sometimes. I have not been able to pin point when it renders and when not ... but I can change dom elements outside of it and then sometimes it works. This is a single page application and the dom gets manipulated via javascipt.
The divs above it works fine
I have attached an image of the div in question from my windows chrome machine.
Related
I am coding a react application that displays an animation for a moving color within a div when a user clicks. I do this using a div inside that changes its inset-inline-start and that has a transition: all 0.3s ease. I am using MUI, so it auto-fills -webkit-transition. For some reason, the animation doesn't show up on chrome for android.It works perfectly fine in my computer's devtools and when tested on an iPhone, and on my android device with firefox, but not on my android device with chrome...
I tried replacing inset-inline-start with left, removing other properties like pointer-events: none, and more - to no effect... I tried updating my version of chrome, tested on other androids - and it doesn't work on any android device.
Here is what shows up in my devtools:
(I am using stylis-rtl-plugin, which is why the .muirtl-...)
The inset-inline-start property changes correctly and the box moves, and in the other scenarios it animates nicely and moves from place to place, but not on chrome with androids...
Would really appreciate help - can't wrap my head around why this is happening...
Safari applies my styles normally on page load for any size. However, it won't apply desktop styles if the window has been sized for mobile since at any point since the last reload.
To most easily see/trigger the behavior, open the site in Safari 13 at desktop size and see the desired layout (most notable here is the navigation bar). Resize the browser down to mobile layout (be sure the navigation switches to hamburger mode), then back up to the desktop layout. (You may also load the site at mobile first, then simply widen the window.)
See test case here: https://www.davincilabs.com/
Normal behavior (as on load):
After browser resize (Safari 13 only):
If you inspect menu elements, you will see that styles-l.css and navigation-desktop.css apply. After resizing up, the style sheets no longer apply.
IMPORTANT: This does not appear to be a JavaScript problem! The behavior still occurs if you disable JavaScript from the develop menu.
To recap:
Found in Safari 13 ONLY. Earlier versions of Safari that we have tested so far do not experience this. Other browsers tested (Chrome, Firefox, Edge) do not experience this.
I have only experienced on desktop. This might affect phones as well but it's impossible to reproduce with my test case; I'm not using any breakpoints small enough.
Initial page load is always correct
Issue triggers when window is enlarged greater than the mobile breakpoint
Safari appears to be no longer applying an entire loaded style sheet file (styles-l.css) to the page layout
Occurs even with JavaScript shut off
This must be fairly rare as I can't find other occurrences after a lot of searching, but it's affecting multiple sites I am working on. Finally, if you cause Safari to reconsider CSS rules in the inspector, (such as by manually editing the parameters of a media query,) Safari will instantly redraw the page correctly.
I had the same problem.
I don't know why but I have this problem just with the store on Magento 2 and with Safari 13. (Also others big e-commerce like The Protein Works, Bulk Powders, sigmabeauty ecc)
I fixed it with macOS Catalina 10.15.7 and Safari 14.
I'm using Font Awesome 5 Free via a kit. On desktop, the icons work perfectly. But on mobile (iOS chrome (normal and incognito), iOS firefox focus, iOS safari), they behave like Schrödinger's cats...
On first page load, the icons appear. Tap reload and they disappear and are replaced by small squares. Tap reload again and they reappear. Every other tap of reload shows or hides the icons.
I notice the same behavior if I toggle back and forth between "request desktop site" and "request mobile site". (I'm not sure what's really going on under the hood there since the page renders the same either way.)
Since they do appear correctly, at least part of the time, I don't think it's a cross-origin problem or a caching problem.
An example page is here: https://onlinesafetyzone.com/learn/learning-zone.php
I've read many posts, here and on GitHub and none of the solutions has worked. Anyone have a clue what's going on?
It seems you have somekind of a XSS issue. I would try to download the fontawsome resources and deploy them with the application. Can be that they have a CDN problem, every second time the fonts break :| so maybe one of the nodes is flipping.
First off, after doing some research I am aware of previous issues relating to input fields causing issues on iOS. However, apparently this was fixed in iOS update 11.3. The device I am using for testing is an iPhone 5s running iOS 11.4.1.
I have created an html document (includes css and JS) and it is stored on the Google Cloud Platform here. If you open this link on either an Android or iPhone, everything displays and works as intended.
I am using AppPresser to create a mobile app. A page of the app loads the Google Cloud link and displays it with no issues. AppPresser provides a previewer app that can be installed on a device for testing the current app build. On an Android device, the html page still works perfectly as intended, but there are issues when testing on an iPhone. Here are some screenshots:
If the "Purchasing Price" input is focussed while at the bottom of the screen, it moves to the top as space is made for the keyboard.
Before:
After:
However, if the "Purchasing Price" input field is near the top of the screen and it is focused, everything seems to go haywire. The container vanishes and a previous container is shown. The user cannot see what data they are entering.
Before:
After:
I find this issue to be very strange, especially as the html page works perfectly on an iPhone when opened directly through the browser. Any feedback would be much appreciated.
Thanks
I thought I had tried all the fixes provided online, but adding the following css:
html,body{
-webkit-overflow-scrolling : touch !important;
overflow: auto !important;
height: 100% !important;
}
from this article, did the trick! I am still confused by two things that maybe someone can clear up for me.
Why did this issue only happen when previewing my app build, and not when loading the html file directly through the iPhone's browser (file is hosted on the Google Cloud Platform).
Why did I have to implement a fix for this, when apparently the input issues were addressed in iOS update 11.3
I'm currently working on one of my first two projects and you can tell that I'm still at the beginning of my youtube-tutorials-&-SO-powered learning journey:
our neighbor's skin & beauty spa
Please don't be too harsh on my code :D I've hand-written everything from scratch in a little editor.
In short, everything seems to work A-OK on desktop computers (I tested FF and Chrome), but on the iPad and other tablets I'm experiencing nasty bugs - I'm having major trouble with two issues:
the Google Maps iframe is always visible (overlaps other
sections) on tablets even if the corresponding section isn't clicked
on in the menu, and I have no idea why! It seems that the
visibility:hidden on a position-fixed element isn't interpreted
correctly?
:focus works on the image gallery 'sneak peak', but
in the services section, the 4 sub-content areas are inaccessible.
(Unrelated?) When the page loads on my iPad (mini) the #logo_box
div appears at page load, but turns semi-transparent the very
instant as the map iframe appears.
EFFORT1: I removed the Google maps iframe-containing 'content' container altogether, and suddenly the :hover on the other content sections stopped working as well. This might be an indicator that something is 'linked' in a way that's not right...
EFFORT2: I assumed that the < label> is the culprit, but I can't pinpoint it. I tried this suggested solution, but it's for IOS4 (2011), and as Rob Fletcher commented last Feb., it doesn't work on IOS7.
EFFORT3: I feel that the .content div's {visibility:hidden/visible;} is causing trouble in the android mobile browser: input:checked hides instead of reveals the particular section while all others show.
Btw, how do I friggin' trouble-shoot tablets? I don't have any dev tool on ipad & android browsers.
Help is much appreciated!!
On iPad, you can go into the Settings App, then go Safari -> Advanced -> Web Inspector.
Then plug it into your Mac via USB and open Desktop Safari on the Mac. If you haven't already enabled the Develop menu, go Safari -> Preferences -> Advanced -> Show Develop Menu.
Then when you open a web page in Safari on the iPad, you can connect to it via the Develop menu on your Mac's Safari and use the web inspector.
If you're using Chrome on Android you can use remote debugging https://developer.chrome.com/devtools/docs/remote-debugging
Weinre provides similar functionality across more platforms (including Android native browser), but is a bit more involved to set up.