I have completed the "Build an App" tutorial here: https://www.polymer-project.org/2.0/start/toolbox/set-up and have noticed that the paper-checkbox element is not behaving well - it will intermittently freeze at various stages of the re-render. For example, when it is in the unchecked state, and I tap it, it will freeze with the grey circle surround, but without actually displaying the tick in the checkbox. It will also freeze in other states as well.
I think the problem only occurs for screen gestures. I.e - it will fail on a mobile device for screen taps, and also on my Win10 laptop when I tap the (touch-sensitive) screen, but when I use the touchPAD on my laptop, it works reliably.
I am a raw beginner with Polymer. (and everything ;^)
This seems to be related to a known issue (PolymerElements/paper-checkbox Issue #156).
I can reproduce the buggy ripple animation on your site in Chrome 66 on macOS High Sierra when emulating mobile mode. It seems to intermittently occur after switching views (e.g., to View Three and then to New View) and then clicking the checkbox label (clicking the checkbox itself does not exhibit the problem).
Part of the problem is the checkbox's ripple has a "focus" state, where it shows the middle of the animation (the "frozen grey circle" you mention) when the checkbox gains focus. I'm not sure that's by design.
I recommend voting on the GitHub issue, or creating a new issue if you think it's a different problem.
Related
I have a cordova app where there is some input fields which requires the keyboard. But when the keyboard is open it's like the app is frozen. More specific, I have a div as a bottom bar which has a fixed position, but when the keyboard is opened, it can scroll, however when I close the keyboard, everything returns to the expected position. Any idea how to make it not freeze? This is only a problem on iOS. Android works perfect.
My app has the same issue, selecting an input field causes the keyboard to show up and severely lag the app until the keyboard is hidden. After testing simple pages with no scripts or css on multiple devices I found that it primarily affects iPads on at least iOS 8.0 and above. It can cause slowdowns on iPhones but they seem to recover a lot faster.
The best solution I've found so far is to setup an in app keyboard. For my login page, I have an element that is styled as an input field and when it is clicked, it toggles a keyboard div element to appear which has buttons for each key inside it.
I know this question may not fit well here but this really is driving me crazy for few hours now :( I use chrome to simulate how websites look on different mobile devices. I clicked something wrong that led to a grid with rulers to appear. I don't know WTF to do to disable this grid. This is the screenshot:
I uninstalled and reinstalled the browser and it returns back.
I reset the developer tools to default settings and it's still there.
This is really becoming a nightmare for me for few hours now. I want the regular emulation without these rulers and grid and top bar. Thanks
There is a small blue button on the left of Elements which actually does the magic.
You didn't click anything wrong. Your Chrome updated itself to 38.2125 and the emulator now has those attributes. Further more, the touch function is broken.
To fix the problem, download the "Canary" version of Chrome. You're still required to see the grid, but the screen is improved and easier to see your layout. Also, the touch function is fixed.
Get Chrome Canary here: https://www.google.com/intl/en/chrome/browser/canary.html
That button just enables/disables the emulator. The OP is looking for a way to disable the background grid while emulating mobile devices.
If you're looking to disable the multi-colored grid lines that show up as an overlay, check out the console dock on the bottom of dev tools. There is a tab labeled rendering and try disabling "Show composited layer borders". If you're still seeing the rulers, that setting is in the Settings (gear) of dev tools, there is an option under the Elements heading for "Show rulers".
I am a web developer for a small company and we recently noticed a strange graphical issue with our website that only appears for users using Google chrome on windows 7 and 8.
The graphical issue occurs when our banner images fade in and fade out, all of the content below the navigation UI flashes white.
This issue is resolved if chrome is run in windows 8 mode though not if hardware acceleration is disabled.
Weirdly enough something else that fixes the bug is opening the developer tools window by inspecting an element, very unusual.
Is there any kind of fix I may have to add to the pages CSS similar to styling specifically for Internet Explorer?
Try to move the following script include right down to the bottom of your page, right above the last </body> tag.
<script type="text/javascript" src="http://ecogrid.co.uk/js/magentothem/bannersequence/jquery.sequence-min.js"></script>
It works for me, at least in the browser. I think the issue was related to the order of the code and perhaps the conflicting of jquery fade effects in the menu and the sequential slider.
This is non related but... good practice. Whilst your at it you may want to move many other 'render blocking elements' down below the fold as well, this is better for load time optimization. But of course for more info see: https://developers.google.com/speed/docs/insights/BlockingJS
I am running into a random issue in a website that I am working. This website contains many images and some images are 1Mb in size or bigger. The site also uses some CSS3 tricks, like 3D rotations.
Since I added this 3D CSS stuff, I noticed a problem in Google Chrome where some random areas in the website are not rendered.
This is a screen-shoot of how the site should be rendered, the green lines are because I've enabled the "Composited render layer borders" on chrome://flags:
And this is how it get rendered when the issue happens:
This white squares appear randomly and they can disappear or reappear in another place if the scroll the website. I also noticed that this problem is more common in lower-end computers so I my guess is that somehow Chrome is running out of GPU memory.
Why this problem happens? and is the any workaround for it (besides disabling the 3d CSS)?
In case it helps, this is the website:
http://colocation.cubo.cc/cheetos/masterbrand/
Update:
I raised a issue for the Chrome team.
I couldn't reproduce this problem in the Chrome Canary.
It was a Chrome Issue, and its fixed now:
http://code.google.com/p/chromium/issues/detail?id=121779
I can only congratulate the Chrome team for pushing bugfixes so fast, I wish IE was like this.
My web application is to be supported by iPhone, Android and Blackberry torch. The code is working fine except some issues. One of the major issues that i am facing is:
When on a page, there are some tags. Some of which contains a text box for letting user's entry. Everything is working fine on iPhone and Android. But in Blackberry, when i am toggling between textboxes by using taps i.e. first open virtual keyboard by tapping on one textbox, then tap on other textbox, then tap again on the other one. In such cases, my background screen that should be displayed at the background of virtual keyboard, becomes completely blank(like it is not repainted as soon as virtual keyboard is opening and closing). If i slightly scroll, i get the background back.
Does anyone know about this problem? Is there any way i can retain my background or kind of refresh it?