Background-position breaks IE 11 Support
challahan opened this issue · 7 comments
When a rule for "background-position" is added to the grayscale element, it breaks the grayscale in Internet Explorer 11. You can see this by uncommenting out this rule at http://www.ideabasekent.com/staging/slo/prototype/home.html on .services-tiles-icon . Without the rule, the grayscale works absolutely fine. I'm not sure what is causing this.
The grayscale itself seems to be working for me in IE 11.
However, the zoom effect does not work. This is because the class name services-tiles-icon does not exist on the new element that the polyfill adds. Try using a more general selector for your hover rule, along with an !important to override the inline style.
Oops - sorry I had temporarily commented out the offending code. I put it back in now. As you’ll see, it’s now no longer grayscale in IE11, just with the addition of the background-position property. Let me know if I can help!
Chris H.
— Chris H.
On Thu, Mar 5, 2015 at 4:56 AM, Karl Horky notifications@github.com
wrote:
The grayscale itself seems to be working for me in IE 11.
However, the zoom effect does not work. This is because the class name
services-tiles-icondoes not exist on the new element that the polyfill adds. Try using a more general selector for your hover rule, along with an!importantto override the inline style.Reply to this email directly or view it on GitHub:
#35 (comment)
Ah, this is actually a problem with the non-numeric background-position (noted in step 3). Non-numeric backgrounds are not yet supported.
Can you do the background-position with negative pixel values?
Ah I see! Can I use percentages for the position, like -50%? My goal is to have the photo zoom in from the center when hovered as opposed to the left/right.
— Chris H.
On Thu, Mar 5, 2015 at 9:43 AM, Karl Horky notifications@github.com
wrote:
Ah, this is actually a problem with the non-numeric background-position (noted in step 3). Non-numeric backgrounds are not yet supported.
Can you do the background-position with negative pixel values?
Reply to this email directly or view it on GitHub:
#35 (comment)
Percentages won't work as expected unfortunately, because of this. 50% (same effect as center) would translate over to 50% margin, which would not be what you want.
If your images are all the same size, you could do this with a negative pixel value though.
Thanks - I will hack it with the pixel values. Thank you for your help - I missed this in the instructions. I appreciate your work on this great tool.
Chris H.
— Chris H.
On Thu, Mar 5, 2015 at 10:14 AM, Karl Horky notifications@github.com
wrote:
Percentages won't work as expected unfortunately, because of this.
50%(same effect ascenter) would translate over to50%margin, which would not be what you want.If your images are all the same size, you could do this with a negative pixel value though.
Reply to this email directly or view it on GitHub:
#35 (comment)
No problem. If you'd like to open a PR with the percentage values and/or top, center, etc. I'd be happy to merge that in 😀