Telerik UI干扰了自己的风格

Question

So on my current project we've run into a particularly pernicious issue in the last couple weeks: Telerik RadWindow styles are no longer rendering properly. There seems to be some extra space around the border, the window icon is sitting flush at the top left, and the title bar buttons exist, but their icons are invisible. We're experiencing the exact same issues with RadAlert and RadWindow, alike. My teammates are also using Firefox and IE, and they've been having the exact same issue.

However: this problem isn't exhibited on all pages. Whether RadWindows look fine on a given page is always consistent for that page. Earlier I had noticed that where the window appears correctly, Chrome was downloading a fresh stylesheet each time, although disabling caching didn't change anything.

I noticed that the URL used for the buggy stylesheet is different from the normal one. I broke down the query strings for comparison, and the _TSM_CombinedScripts_ parameter gives different public key tokens. They're actually identical at the beginning, but by the end they're completely different.

normal:

d=d_7ijIXc06Eqg7xyrMT_AE_WxZL3XaVJz_VwsvOdK_1ssgHIAGoqaJzPVn-aFQFJVakZqv0a6M6IUW8lKaDBl-g9FohhCb-0KC2Mu14d6L4y47PrZb-wQiVUGqaxwCy7qcc2Dw2
t=635823632443834005
compress=1
_TSM_CombinedScripts_=
    ;;Telerik.Web.UI, Version=2014.3.1209.45, Culture=neutral, PublicKeyToken=121fae78165ba3d4:en-US:cd668efa-682a-4e93-b784-26f0724f247c:92753c09:ed2942d4:580b2269:8cee9284:a3b7d93f:9e1572d6:aac1aeb7:1c2121e:4d471440:c86a4a06:45085116
    ;Telerik.Web.UI.Skins, Version=2014.3.1209.45, Culture=neutral, PublicKeyToken=121fae78165ba3d4:en-US:a1fec5ec-d336-48a8-850e-06eaadf10400:62641802:f82ffad1:9db7724d:fa319bc5:226a649d:51352d27:8b77daa8:976fe3c:f144572

buggy:

d=d_7ijIXc06Eqg7xyrMT_AE_WxZL3XaVJz_VwsvOdK_1ssgHIAGoqaJzPVn-aFQFJVakZqv0a6M6IUW8lKaDBl-g9FohhCb-0KC2Mu14d6L4y47PrZb-wQiVUGqaxwCy7qcc2Dw2
t=635823632443834005
compress=1
_TSM_CombinedScripts_=
    ;;Telerik.Web.UI, Version=2014.3.1209.45, Culture=neutral, PublicKeyToken=121fae78165ba3d4:en-US:cd668efa-682a-4e93-b784-26f0724f247c:92753c09:ed2942d4:580b2269:1c2121e:9e1572d6:45085116
    ;Telerik.Web.UI.Skins, Version=2014.3.1209.45, Culture=neutral, PublicKeyToken=121fae78165ba3d4:en-US:a1fec5ec-d336-48a8-850e-06eaadf10400:62641802:f82ffad1:9db7724d:8b77daa8:226a649d

As for the actual bug, I did a little inspecting, an I found that the stylesheet actually overrides its own styles. I ran the stylesheet returned by Telerik.UI.Webresource.axd through a formatter, and line 216 defines a couple rules:

.RadWindow .rwCloseButton {
    background-position: -90px 0
}

.RadWindow .rwCloseButton:hover {
    background-position: -90px -21px
}

Then on line 4634 it overrides them. The buggy stylesheet has about 2600 extra lines overall. Strangely enough, these new rules apply the regular close button style to hovered close buttons in inactive windows as well.

.RadWindow .rwCloseButton,
.RadWindow.rwInactiveWindow .rwCloseButton:hover {
    background-position: -1px -762px
}

.RadWindow .rwCloseButton:hover {
    background-position: -21px -762px
}

On pages where windows appear correctly, only the first two rules are applied, and the second set of rules never makes an appearance. I just don't understand how it puts together the styles or why it's overriding itself.

As far as I can tell, none of the references have been changed. Nothing's been upgraded, the web.config hasn't changed. We're seeing the same issue both in our local environments and on our dev box.

Answer 1

Either removing RenderMode="Lightweight" from all RadWindows or making sure all RadWindows have it fixes the problem.

Turns out the problem was that one of our team members added some RadWindows with RenderMode="Lightweight" to a few pages. Presumably, the second stylesheet that was loaded was actually for lightweight mode. This would be why the docs tell you not to mix render modes.