CODEWITHSUNDEEP
cssinternet-explorer
DerekConlon
DerekConlon

Reputation: 463

Linear-Gradient in IE10 acting "weird"

Here is a fiddle:

http://jsfiddle.net/e80fen4p/2/

EDIT: You can just highlight all of the result div and you'll see the colors change back to what they should be. I'm guessing there isn't a fix for this. If its that easy to "fix" it just by highlighting it, it probably isn't a problem with the code.

Basically it works as intended in IE11 and chrome and Firefox, but if you do this fiddle in IE10, you'll notice when the child div slideToggles, the background color starts over in the child div rather than extending to include the child div as it expands.

If you try this fiddle in IE10 you should see what I mean. It will look normal in all other browsers.

I'm wondering if there is anything I can do to modify my CSS code to make it work properly in IE10 also.

I've tried:

background-image: -ms-linear-gradient(top, #FFFFFF 0%, #A4A4A4 100%);

but it still doesn't do anything different in IE10. The normal way I use it is

background: linear-gradient(#FFFFFF, #A4A4A4);

which works in IE11 and all the other browsers. It seems its just IE10 that is throwing me through a loop.

The weird part is, if i open Developer tools and highlight any of the div's,the colors reset and look like they are supposed to look when the div is expanded. That, to me, says its clearly a bug with how IE10 is displaying it on its first run of the code.

Anything I can do or is it just IE10 people are gonna see it slightly different. This bug doesn't stop my code from working or the webpage from being useable just makes it look weird.

Upvotes: 0

Views: 67

Answers (1)

DerekConlon
DerekConlon

Reputation: 463

I added:

height: 100%;
margin: 0;
background-repeat: no-repeat;
background-attachment: fixed;

and it started working. its not perfect and it isn't exactly the same, but at least its working.

The difference is when its minimized (slideToggled) it only shows the top of the div's colors, it doesn't show the full gradient in the minimized div but that isn't a big deal, just cosmetic. It's better than what it was doing.

Upvotes: 1

Related Questions