search

googlearchive / paper-slider

A slider à la Material Design
16 stars 18 forks source link

progress-bar missing in safari #43

Open jatsrt opened 9 years ago

jatsrt commented 9 years ago

The progress-bar part of the component does not render in safari. This is with paper-slider#0.5.5.

It is rendering properly on chrome, in android/cordova. However it show as the attached demonstrates in both Safari and iOS/Cordova. screen-shot-2015-02-26-at-9 44 39-am

jatsrt commented 9 years ago

Just a note, since this leverages paper-progress, paper-progress renders properly.

frankiefu commented 9 years ago

It works fine when I ran the demo on Safari on iOS 8.1.3

https://www.polymer-project.org/components/paper-slider/demo.html

jatsrt commented 9 years ago

Version on OSX is 8.0.3. I'm having the problem in the simulator, have not tried to run it on a live device yet. Attached is the version information from the simulator

screen shot 2015-02-26 at 2 21 05 pm

frankiefu commented 9 years ago

Does this demo work for you? I suspect you might be hitting a side effect under ShadowDOM polyfill: styles leak 'in' to polyfilled shadowRoot's. For this you'll need to take care to use selectors that do not leak into polyfilled shadowRoots. If you are still not sure, you can send us a testcase e.g. jsbin and we can take a look.

jatsrt commented 9 years ago

Demo does render properly. It's quite a large application and possibly something is leaking over, I'll dig in to see what I can find.

jatsrt commented 9 years ago

Well, looks like I may have been bit by this: https://github.com/yeoman/generator-polymer/issues/58

I had a global style:

* {
  .box-sizing(border-box);
}

This seems to break proper rendering of the sliders under safari.