I'm working on a Squarespace website (I can't post the link because of privacy reasons). I'm adding an announcement bar to the site, for covid info. It works fine almost everywhere, except on chrome in android. On that browser, when the page is first loaded, the very top of the text is cut off. Here's an image:
Image of bar cut off. (sorry it isn't a screenshot my phone won't take screenshots in incognito and it was in incognito for unrelated reasons).
Chrome won't allow me to scroll up anymore, which would correct the issue. When I reload the page, it starts off looking the same. However, I now I do have the ability to scroll up.
I've attempted a couple of solutions. Firstly, I've tried to set the z index of the bar higher. But that didn't help. I've also tried to add a script which automatically scrolls the user to the top using window.scrollTo(0, 0); but that also failed.
Sorry I can't show code, it's a Squarespace site. I hope someone can help. Thanks.
Edit: I've done some checking and it happens on computer chrome too when I make the screen small enough, but NOT when I switch "devices" in inspect element. However, the problem isn't there on iphone. Chrome on iphone uses webkit, while on other devices it uses Blink, so I think Blink may be the source of the issue
Related
I am using OpenSeaDragon to show images on my website. With the desktop browser everything is working correct. Also in device mode with the DevTools from chrome. But when I switch to a real mobile device, I can't change to fullscreen mode.
The view try to expand, the buttons slide to the top, but cancels itself immadiately.
I have build a small Android application with a webview to access the website.
I even don't know, if it is a Android issue or an OpenSeaDragon issue. Any hint what I should check could be helpful.
Thanks in advance
I found scrolling performance on Chrome Android is so terrible. If you slide down the page with your finger not leaving the screen to perform a scroll action you'll notice obvious stutters/jitters (even if no dom has changed). Removing all relevant event listeners doesn't make a difference. So I tried to capture a performance record to figure out the problem but found nothing useful.
You can see in the following screenshot, "Others" cost so much time. I've googled for a long time to find what does that "Others" mean in the Summary tab but failed to find any information about it. Those "Others" almost occupied the whole timeline, but I don't know if it's related to those stutters. I tried to open the same webpage in an app's webview (don't know which Chrome version it uses) and did not find any stutters.
Example screenshot
Chrome Version: 61(stable)/64(dev and Canary)
Android Version: 8.0
Device: Google Pixel
As this is my first post here, I would like to apologize if I did something wrong with this thread.
About the problem: I have a problem with the background when I go to my website, but it appears only when I open it on mobile device. The website is www.mistralgroup.eu (It's in bulgarian, but I hope you get the idea)
You can check it and you will see what I mean - everything is fine and it works properly until I try to open in on my mobile device. Then 3 boxes with the main image are okay, but there is an orange container between boxes and footer, which is actually the background. But why it appears only when I use it on mobile? I tried different combinations, but it just doesn't work. I know it's not a hard to solve problem, but it makes me nervous.
Thanks in advance and best regards,
Your website is not Responsive. That is the problem. The orange part is present in mobile view but u have scroll to right to see it.
All!
I have a perplexing problem that occurs only on some specific phones-- but they're the phones that my customer wants the app written for, so I need to deliver. :-/ The site that I am working on consists of fourteen jQuery mobile "pages", and two of them are exhibiting the following behavior:
I have an issue where pages being loaded from the browser's cache-- whether by pressing the browser's "back button" or simply reloading a page that has been previously rendered-- is broken:
While the page renders correctly, the bottom of the page is either "cut off" and can't be scrolled to, or a medium amount of "new" blank content is inserted at the bottom of the page.
When the latter occurs, the UI controls are "shifted" by the length of the new blank content compared to where the user was tapping: If an inch was "inserted" when the page is displayed for the second time, tapping on the screen triggers a click event in the location an inch "higher" on the page than where my finger touched the screen.
I will note that this problem appears to occur only on pages that have enough content to scroll off screen; pages that have small amounts of content do not suffer this problem. There is no dynamic content being added to these pages.
It appears that once a page is created and then a different page is displayed, something breaks in the DOM when the previously-created page is redisplayed.
The mobile sites run perfectly in Chrome and Firefox on a PC; they manifest themselves only on certain Android phones. One phone model that is giving me particular headaches is a Samsung SGH-I437P running Android 4.1.2.
I'm using the latest versions of jQuery-- rev 1.9.1 of jQuery, and 1.3.2 of jQuery mobile.
What I think I need to do is to tell jQuery to completely rebuild the page, but am unsure if this is even feasible, as the since the page has already been loaded into the DOM with all the jQuery mobile "embellishments"-- so there's no "bare-bones non-jQuery-mobile" HTML to rebuild the page with.
However, searching for page rebuilding / reloading hasn't turned up any concrete hits-- there was a way to do this with older versions of jQuery Mobile, but this does not work for the latest version.
Has anyone else experienced this behavior and know how to counteract it? My team of two have been focused on this for weeks to no avail.
I am currently working on a bookmarklet and have encountered something a little weird (and frustrating) with Android's Browser (seems to be device independent).
As you well know, when viewing a web page, as soon as you scroll down, the address bar in Browser hides. All well and good. However, it seems that if you invoke a bookmarklet, the address in the bar is replaced with a "javascript:" protocol address and the address bar won't auto-hide when you scroll.
No big deal, you'd think, but the content injected by my bookmarklet (which re-positions on scroll) is nicely covered by the address bar! I appreciate I could modify my code to just reposition slightly differently but there are reasons I'd like to avoid it at this stage.
Has anyone come across this particular issue before and are there are ways round it?
UPDATE: If it's worth anything, the "javascript:" protocol comment looks like a red herring. It seems to be because Browser thinks the page isn't loaded when my bookmarklet is invoked (little blue bar only goes a tenth of the way across and stops there). So, my question might be 'How do I accurately convince Browser than my page is loaded or kill the load?'