I'm developing a mobile site in HTML for use on 2 Blackberry models, one quite old (8700v) and one newer (8520) as specified by the client.
The native browser on the 8520 is rendering my HTML/CSS pages perfectly. The native browser on the old 8700 is far from perfect however as the CSS support is minimal.
As a solution I decided to try installing Opera Mini 4.2 on the 8700. The rendering is great, speed is even improved but there's some rather strange behaviour happening with the hyperlinks on the page.
When I scroll down through my pages links are automatically highlighted and made ready for selection. This is fine until I have a number of links close together, for example in my nav menu. The nav menu is a set of links arranged within a . When I scroll to the menu all the links within the menu highlight at once. Even within the body if 2 links are on 2 separate lines (one stacked on top of another) the same issue appears.
I'm trawling Opera documentation but haven't found anything useful yet. Anyone got any ideas on why this happens and if it can be resolved?
Without seeing the actual HTML/CSS code, it's hard to pinpoint the exact cause of this, but it's most likely one of the following:
The links in question point to the same URL. The browser will highlight them as a group to visualize this.
Some script is adding a click event listener or similar to the group of links.
An <a>-tag has been left open.
Related
So, here's a weird issue I've come across with Safari on Mobile—I suspect there's one root cause for all of it, but have not been able to figure it out:
Links wrapping images don't cover the full width and height (as they should screenshot below), just the upper left corner
Linked Buttons only work on the left half
Links with: hover will hang on the hover and you have to press through
To make things worse, development tools that are supposed to simulate iPhones don't show anything funky—the whole image/button should be linked, etc.—but when you use the site with an actual device, the above happens.
I know, I know, this feels like such a basic question, but I've been banging my head against it for two days now.
Here's my testing page, but you'll see it intermittently across the site: https://redcowmn.com/testing-safari-ios-issue/
Is there a stray line of code that tells Safari to misbehave?
Even an ultra simple <p>Hi</p> acts unreliably.
I'm building on the X Theme framework on Wordpress (where I've got 20+ other sites), Yoast SEO, Wordfence, Gravity Forms, WP Rocket (in Safe Mode), WooCommerce, and Stripe for WooCommerce.
Thanks, folks.
Modal screen!
I had a modal screen acting like some sort ghost element, screwing with the z-index, etc., etc. That's why only parts of the image were active.
Very strange that only Safari had an issue with it, but anyways, that was the issue.
I guess that's what I get for trying to hiding a required ugly embed off screen... :)
So my problem is that for some reason on one page of a website I've been fiddling with, the two navigation bars that I have (Top and Sidebar Navigation) are for no apparent reason scaled down in the Google Chrome browser, their behavior is entirely normal in both iE and Firefox. The bar's remain completely functional, but are simply scaled down perhaps to 66% of the intended size.
Here is the code for the page in question: http://pastebin.com/uvrPR1JW
Here is the code for a similar, but functioning page for reference: http://pastebin.com/5dAMREfC
They're running off the same style sheet so the issue is likely in the HTML, however the style sheet is linked in the comment section for reference. If anyone spots any reason why it would be doing anything like this it'd be great to know. And I apologize for the messy code, as I said I'm just playing around with it.
Update:
You may notice that my code includes at least one flexbox, here is question posted by another user that may be related but I can't make heads or tails of it: Chrome shrinks figure elements as they are added to a flexbox
Update: Doesn't seem to be a problem with the flexbox, the issue still exists even when I remove all content except the top header.
I'd say it's the setup of your navbar, how you have an image and you just change the position of it on hover. Chrome has a weird feature where it moves things around when there is images so I would suggest looking up how to make a proper navigation bar (It's pretty easy).
I was wondering if anyone has ever come across this issue before? I loaded up Chrome today and for some reason the entire left hand side of the elements section is broken.
I can navigate down using the keyboard arrows and see the breadcrumb selectors change (as shown in the picture) and for some reason the top of the document seems to display (but looks very odd indeed), but anything below the 'if greater than IE8' doesn't show whatsoever.
Has anyone ever experienced this before? Am i better reinstalling or launching a support ticket?
This must be a content problem, but so far I haven't found it - and it is new, it just started happening on a production site.
Using Chrome Version 31.0.1650.57 m, I can replicate this pretty regularly, and so far, not in any other browser.
the problem is on load, some dom elements are appearing out of order. That is, the dom has div1, div2, table1, div3, table2, etc., but the rendered web page shows table 2 above div1. There is not, as far as I can tell, any css that is causing it to be positioned strangely, and simply refreshing the page makes it render correctly. There are not errors in the console.
One caveat - the html is the output of a conglomerate of software and developers, and is not the best dom structure to begin with. But again, it is fine in all other browsers (so far), and it was fine in Chrome until recently.
Below are two screenshots* - the source, and the rendered output. Note that in the source, the H3 tag with the words "Items In Your Shopping Cart Below" appears above the highlighted element (the table containing the checkout button). But in the rendered html, you can see that the button is above the H3. Again, if I refresh the page, it fixes itself.
I am still troubleshooting this, will keep trying to find the problem, but hoping someone out there might have some idea what could be going on. I suspect it is to do with the carousel of images at the top, but that's been in use, unchanged, for a long time now, so not sure what's changed.
Shoot, I don't have the right creds to post images in my question! Here are links to the images:
https://www.dropbox.com/s/v4prpoinmc83f00/Chrome%20Cart%20Bug%20Source.png
and
https://www.dropbox.com/s/j092l7e1etebz07/Chrome%20Cart%20Bug%20Rendered.png
You can also (probably) reproduce this yourself. Got to www.storkie.com, and add something to your cart. No, I'm not trying to lure you into shopping there - just that's how to get to the problem. Anyway, it may come up fine on first add, but then, if you click the View Cart link at the top, it probably will come up as in the pictures.
Thanks in advance for any suggestions!
I have the same issue on a JSF Primefaces application and I couldn't find any unescaped characters.
The element order on my page changes every third or fourth reload, BUT I have an ajax poll (refresh) every 15 seconds and when this hits the page renders correctly.
I compared the source code before and after this ajax refresh, but there were no differences.
I know this is no solution, but maybe helps to get closer to one.
Edit:
I found an issue in chromium issue tracker regarding this problem.
https://code.google.com/p/chromium/issues/detail?id=322936&q=order&colspec=ID%20Pri%20M%20Iteration%20ReleaseBlock%20Cr%20Status%20Owner%20Summary%20OS%20Modified
In any case, the issue should be fixed in next chrome version.
Just wanted to say that I have the exact same problem. A site that was last updated six months ago has recently started rendering elements out of order in Chrome.
For me it happens 2 out of 3 times I visit the page and it's as if rendering restarts when it hits a specific tag.
My code look kinda like this:
List
<span class="HistoryLink_Separator"> » </span>
<span class="HistoryLink_Last>Item</span>
Chrome renders the page fine until it hits the SPAN with the » (right double angle quotes) then it starts positioning elements at the very top of the page again.
EDIT: I've uploaded a video to youtube demonstrating the bug here: http://www.youtube.com/watch?v=zkDYlgtX5Hk
I've got a really weird bug that I found testing my new web application on a Samsung Galaxy S2 running Android 4.03 ICS.
What happens is that when you load a form in the default web browser and then scroll down the page, the hitbox/touchable area seems to stay where it was on screen when the page first loaded, even though the form element itself has scrolled up the screen.
As far as I can tell with the few testing devices I have available, I think this only happens on the Samsung Galaxy S2 as I have tried it in the Android simulator with the same version of android and was unable to replicate the problem. I know this makes it a very specific user base that haves the problem however last I checked the Galaxy s2 was the most popular Android handset in my country (Australia) so it would be nice to find a fix.
I have created a very simple page to demonstrate this at http://users.tpg.com.au/geoffica/test.html
You can replicate the problem by doing the following:
Load the page on a Galaxy S2
Scroll the browser so that page completely fills the screen and the address bar is just off the top of the screen.
Where the select box is, place your finger to the side of the screen as a marker of where the select list was.
Scroll down the page any distance, (while still keeping the select list on screen) then touch the whitespace where the select list used to be and the options should come up on the screen. It may take a few attempts to get it but it will happen.
Now I know you are thinking this is quite tricky to replicate and likely rare that it will happen, but on a form I built for a client because of where the elements were positioned, the hitbox always overlapped the submit button of the form, making it very difficult to hit the submit button. Select lists will also steal touches from other select lists if the hitboxes overlap, making the wrong options appear when touched.
I've tried many things but the only workaround I've found so far is to use the touchstart event to trigger my submit button instead of the click event. This seems to happen before the click event of the select lists and prevents it from getting in first, but this is far from ideal and doesn't stop the select lists from stealing clicks from other elements on the page.
I've also thought about rolling my own jquery plugin to maybe place the select lists offscreen and then trigger their click events by touching a link or something. If it's a mobile device then the options will come up on screen regardless of the position of the select list. This would be quite cumbersome however and I would need to factor in the effect this would have on users coming from a pc or iPad for example which shows the options in a dropdown list instead. It sounds pretty problematic to me. May even require some Galaxy s2 specific browser/device sniffing.
Does anyone have a real workaround for this, apart from just not using select lists?
Are you by any chance using absolute positioning for it? this will fix to a certain area on the screen not the page.
First, I would update the document header to a proper HTML5 header:
<!DOCTYPE html>
I think this might be a problem you can fix With Jquery-mobile
Just simple because when you do not use it , you website look very weird on mobile Browsers
May be this is the solution and this is just a hint :)