When using paper-slider both the knob and bar disappear while dragging - polymer

In Chrome, when I drag a slider both the knob and the bar disappear and then re-appear when I release.
I've gotten as far as finding that the issue arises when the "dragging" class is added to the knob and bar, but I can't figure out what about that class is causing them to disappear. I just updated to Polymer Starter Kit 1.1.1 to see if that would resolve the issue, but it still seems to happen.
It's happening only in Chrome (IE, iOS, and Android all work fine), and it's happening even when I'm using a fresh install of PSK, just adding paper-slider to elements.html and a paper-slider tag to the main content area in index.html.
I've had the same issue with Polymer Starter Kit 1.0 and 1.1.1. I'm using the current public version of Chrome (46.0.2490.86 m).
Any ideas?

I finally figured out (thanks to Peter Burns on the Polymer team) that this issue was being caused by a browser extension (MeasureIt 0.4.14). Once I disabled this extension the paper-slider works fine.

Related

Brave Browser / Bug with scrolling - Return to top of the page

there is a bug regarding scrolling when opening https://www.streampicker.de/ with the Brave Browser. After scrolling down a bit, the website jumps back to the top.
Video to show it in action: https://www.dropbox.com/s/37suikq9awxix7c/StreamPicker%20-%20Brave%20Browser%20-%20Scrolling.mov?dl=0
It works perfectly with all other browsers including Chrome. Brave is on the latest version with no other external extensions installed.
Any ideas what could cause that problem and how to fix it - in the browser or in the code of the website itself?
Thanks!

autodesk viewer fullscreen broken on iOS?

Noticed that when I go to view a 3d model on my iPhone (using the latest version safari or chrome), the full-screen button doesn't work. Anyone seeing this problem and has figured out a solution?
Public example you can try on your phone.... https://autodesk-forge.github.io/viewer-javascript-offline.sample/
This is a known issue and is being addressed by the Dev team. Stay tuned to the official Forge blog for release notes of future versions of Viewer to keep tabs on the fix.
In the meantime one can work around by programmatically toggling the toolbar (there's no display cube on mobile either):
viewer.toolbar.setDisplay('none') //hide
viewer.toolbar.setDisplay('block') //show
You can come up with a button of your own as the control for this.

ZURB Foundation rendering problems on Chrome for Windows

I am having a strange problem with an app developed using Foundation Framework.
It seems that there are huge rendering problems, especially during/after scrolling. It may happen that images do not scroll together with the rest of the elements, but they remain static (as if they had fixed position with z-index -1), therefore messing with the other elements.
The issue happens only with Chrome for Windows (tested versions from 35 to 41). While on the latest Chrome (42), released yesterday, the issue is not happening.
It doesn't seem to be a known issue, but I have checked my code and everything looks perfectly fine. After all it works in every other browser perfectly, EVEN ON CHROME FOR MAC!
This is a screenshot of how the application should look.
Here are some of the rendering problem happening on Chrome for Windows after/during scrolling the page: Here, here
Any help on where this might come from, is appreciated. Thanks
Removing the height 100% from 'html' and 'body' solved the problem.

elements display incorrectly on tablet browsers

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.

iconfonts only show in Chrome on hover

I am using Bootstrap glyphicons and FontAwesome icons and am experiencing a strange bug where they do not show unless hovered over, at which point they are permanently visible. When I reload the page they aren't visible again.
This only happens in Chrome. Safari and Firefox both show the icons normally.
I am running Chrome v33.0.1750 - this has never happened before.
I found some JavaScript code to re draw the page and works for me. I found this on SO somewhere so it's not my code.
$(document).ready(function()
{
var Offset = $('body').offset();
$('body').offset(Offset);
});
I just figured it out. Turns out there's a conflict with one the jQuery plugins, holder.js - the image placeholder plugin. Removed that and the icons show fine now on reload.
Strange, considering that in Bootstrap's documentation, they use holder.js to generate images for their 'Thumbnails' section.
UPDATE:
It seems there is a conflict between Chrome 33 and any version of holder.js above v1.9.
https://github.com/imsky/holder/issues/81?codekitCB=415695904.557899