I have an html page which shows many rows of data which the user needs to be able to edit. So, a lot of input fields.
In every browser except for MacOS Safari there is no problem at all. In Safari however there are problems: clicking (focussing) on an input takes sometimes a few seconds. Typing....has some serious lag.
Having read a lot of topics i still do not have a working solution.
The one that somewhat works is wrapping EVERY individual input inside tags. But, while typing then works without any lag, focussing still takes several seconds.
This solution, mentioned by Roman:
Why does Safari Mobile have trouble handling many input fields on iOS 8
I do not use any extensions or whatever, just plain MacOS Safari.
Does someone have any other solution that finally solves this strange behavior? I'm tearing my hair out here.
Related
I have created a wholesale order form in the form of a large HTML table with lots of number inputs. I've noticed that switching between number inputs and typing values in the inputs are very slow in this table (ie. when I click in an input, it takes time for the cursor to show up; when I type in an input, it takes time for the character to show up). Is there any way for me to remove the lag without paginating the table rows?
You can view and play around with the table here (use guest password "braese").
A screenshot of a Chrome Dev Tools performance recording for clicking inside a single input (I'm not really sure what to make of this):
I did some more digging and testing, and it turns out the lag (update layer tree) when clicking/typing in inputs is only an issue in Chrome. This answer on another question points to issues with Chrome since version 46. It's a shame that such a popular browser has allowed an issue like this to go on for 2+ years. We will have to paginate our order form since Chrome is so popular with our client's customers.
Wow my chrome almost crashed :)
It is your styles
You are causing layer creation every time you apply translate transform
Check out the Layers menu in Chrome Dev tools;
Test if it runs better - only table :)
Also order your styles and scripts! - first styles after that scripts
Cheers!
We have an application which displays a (complex) table of (~500) rows which can be edited via a modal dialog (PrimeFaces). Displaying the table (or doing any ajaxy things like changing some status on save buttons) takes much more time in IE9+ (5-6s) than in Chrome or Firefox (< 1s).
In the Internet Explorer's profiler, I see that most of the time is taken by the JQuery.attr() method which is called by PrimeFaces' updateFormStateInput().
I really don't know how to go deeper in identifying the cause of this problem or if this bad performance is considered normal for IE.
Switching to Chrome/Firefox is not an option as our users have other applications that only work with IE (sharepoint).
So, is there anything I can do to solve/identify the problem? (Except removing each component one by one and see if this improves performances.)
Sorry for the rather unspecific title, but I can't say it any better.
I'm making a site which works flawlessly (as far as I coded it) in Firefox, but since only insignificant changes it stopped working in Chrome, and I have absolutely no idea why this is! Here's a link to the site, so you can try for yourself:
http://aichorn.com/original
as I started working on it, it worked great in Chrome, but since yesterday it stopped working in Chrome. normally you are supposed to be able to click on "trail-infos" and then a box with a link should fade in. you can get to the box at the moment only by pressing spacebar or clicking on the right arrow...once you are on the trail-info box there's a link saying "Allmountain", and you should be able to click that link. but it simply doesn't work. as if there's an invsible overlay or something, preventing you from clicking! I cant figure out what's the problem, been trying z-index and stuff, but nothing helped! I've undone all changes I made from the last working version, but still it wont work. this is driving me nuts, since i can't find any reason!
I'm using Chrome 33.0.1750.154 m and the website is working fine. Could be an issue with your PC or temp internet files (Clear cache cookies etc) to try and get working.
I am able to navagate left through all the different boxes that move in 3D space, Trial Infos allows me to click on the small box and the content loads.. I'm assuming that is meant to the be product.
If not show screenshot comparisons what you are getting on FF and what you are getting on Chrome.
Interesting concept for the website also! Best of luck!
After some changes to our site, we are seeing that when certain pages are loaded, the page quickly changes width. This occurs every time on webkit browsers Chrome and Safair, but only rarely on some other browsers.
I have not been able to produce the effect at all on Firefox on Windows, Firefox on Mac, nor IE9 and IE11. It seems to rarely occur on IE8 and IE10. I have not found a pattern yet that causes it to appear on IE8 and IE10.
To understand what might be causing this, it would be good to know if certain styling attributes take an initial value while the page is loading but them assume some other value by the time the page is fully loaded. This could explain what is happening.
I should add that this problem developed after some changes which "should" not have caused this issue. Basically having to do with adding URL rewriting to eliminate duplicate pages. Clearly some side effect is operative.
At the moment we only have the code on development servers, so it would not be that easy to actually see it right now, although that is the obvious first question from a responder. So at this point, the question is more "what generically causes pages to reformat under Webkit."
UPDATE: the problem seems to be traced to Google Translate. When I remove that from the page, the problem goes away. Put it back; problem comes back.
Oddly, it mostly impacts Chrome! IE10 and 11 are exempt, and with even earlier IE versions the problem is much less.
I can readily demonstrate the temporary widening of the page just by reloading the page.
I experimented with trying to put the div containing the translate div instead a container div and setting some attributes on that. So far I have not found something that mitigates the problem.
We have suppressed Google Translate recently because it started adding other junk to the bottom of the page. That other junk is gone but we will continue to suppress it due to this new jumpiness.
I believe there is some clever way to contain the issue, but have no more time for it.
I have confirmed that the issue is definitely caused by Google Translate being on the page.
One of the pages on my website is pretty tall. It's under 200KB in size, but it's a series of tables that takes a lot of vertical space. After about 40 screenfuls (about 1/4 of the total scrolling height of the webpage), it just stops drawing: everything above that looks fine, and everything below that is plain white background -- except the footer (in a different div, I guess), which shows up fine at the very bottom.
I've asked around the office, and other people have seen this before, but don't know what causes it. We certainly have other pages here that are just as tall, and have no problem. I've seen pages render fine which are much longer. It's not a complex document at all -- some nested divs, some tables (4 or 5 columns, a couple hundred rows each), some CSS.
The page renders great in both IE7 and Chrome. Only Firefox 3 does this.
Any clues as to what's causing this? Or a workaround? I don't even know what to google for here.
EDIT: I've seen this on another, completely unrelated page. In both cases, it cuts off at about 33000 px from the top -- ha. I know FF3 can have divs and tables longer than that. Anybody know what they might be using a 16-bit size/coordinate for?
Sounds like this may be related to Firefox Bug 215055 or Firefox Bug 333994. Check these out. If it is indeed related, you can always attach your testcase to one of these bugs and add your comments to the bug.
I also recommend, like zodeus does, trying a nightly build or a beta of 3.1. If it's fixed there, that doesn't mean you force your customers to upgrade, but at least you know it's fixed in a future build and you can campaign for Mozilla.org to bring the fix back to a more current build where you might get people to upgrade.
Try downloading the Fire Fox 3.1 Beta or Nightly Build. They have reworked a lot of their internals. If it works there then I would say it's a reported and fixed FF3.0 bug.
This bug filed in Bugzilla may be related...