Picker not showing image backgrounds correctly on iOS

[soumak77]

The color-picker-hue div is completely white. The slider doesn't slide, but will move with taps. The color-picker-grid-inner is just one color, specifically the color the hue slider is selecting (though on the device I can't see the color as stated previously). The color-picker-swatch is the correct color based on the hue and the location of the color-picker-picker. Similar to the slider for the hue, the picker does not slide with the input, but will move with taps.

Usage:

<color-picker ng-model="color"
    color-picker-disabled="false"
    color-picker-format="'hex'"
    color-picker-alpha="false"
    color-picker-swatch="true"
    color-picker-swatch-pos="'left'"
    color-picker-swatch-only="false"
    color-picker-case="'lower'"
    color-picker-inline="true"
    color-picker-on-change="onChange($event, color)"></color-picker>

Tested on iPhone 6+ with iOS 8.3 (both Chrome and Safari)

[ruhley]

@soumak77 I don't have immediate access to an iOS device, but will try to fix this as soon as I can.

[soumak77]

@ruhley thanks, let me know if you need to me to test something

[soumak77]

I just tried on http://ruhley.github.io/angular-color-picker and the background images are showing up. That site is using v1.0.7. Let me try that version in my app and see if it resolves the issues. I still could not drag the picker or slider and had to tap to move them (not sure if dragging is supported on mobile but know it works on desktop).

[soumak77]

Actually that site would have to be using a 1.1.x version since it supports inline. I thought it was v1.0.7 because that was in the header of the CSS being used, but guess that was a cached file.

[soumak77]

I'm confused, I see it is downloading the v1.0.7 source, but supports inline

[ruhley]

I have just updated the website and it is now running v1.1.4. How does it look now?

[soumak77]

Background images are being displayed. I'll look to see if there is something up with my integration.

[soumak77]

I can't figure out why the background image is not being shown on iOS with my app. Works perfectly on desktop and work on iOS using the website for this module. Since it appears to just be related to my app, I'll close the issue.

While I wasn't able to use the module as-is, I was able to devise a solution that removes the background image completely! The solution uses CSS linear gradients. This works for me since I'm using Foundation for Apps and don't need to support IE9. The solution is pretty clean though, so perhaps it's worth adding a class (or directive option) to enable using CSS gradients instead of images in the module.

.color-picker-row .color-picker-grid {
  background-image: none;
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(0,0,0,1)), 
              linear-gradient(to left, rgba(255,255,255,0), rgba(255,255,255,1));
}
.color-picker-row .color-picker-hue {
  background-image: none;
  background: linear-gradient(to bottom, #ff0000, #ff00ff, #0000ff, #00ffff, #00ff00, #ffff00, #ff0000);
}